namespace ext.grid
{
	using System;
	using System.Runtime.CompilerServices;
	using System.Html;
	using System.Collections;
	
	
	/// <summary>Configuration Structure</summary>
	/// <definedin>src\widgets\grid\GridPanel.js</definedin>
	public sealed class GridPanel_Configuration : Record
	{
		
		#region Fields
		/// <summary>
		/// The {@link Ext.grid.Column#id id} of a {@link Ext.grid.Column column} in
		/// this grid that should expand to fill unused space. This value specified here can not
		/// be 0.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;The &lt;tt&gt;{@link Ext.grid.Column#id id}&lt;/tt&gt; of a {@link Ext.grid.Column column} in
		/// this grid that should expand to fill unused space. This value specified here can not
		/// be &lt;tt&gt;0&lt;/tt&gt;.&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: If the Grid&apos;s {@link Ext.grid.GridView view} is configured with
		/// &lt;tt&gt;{@link Ext.grid.GridView#forceFit forceFit}=true&lt;/tt&gt; the &lt;tt&gt;autoExpandColumn&lt;/tt&gt;
		/// is ignored. See {@link Ext.grid.Column}.&lt;tt&gt;{@link Ext.grid.Column#width width}&lt;/tt&gt;
		/// for additional details.&lt;/p&gt;
		/// &lt;p&gt;See &lt;tt&gt;{@link #autoExpandMax}&lt;/tt&gt; and &lt;tt&gt;{@link #autoExpandMin}&lt;/tt&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoExpandColumn")]
		public string AutoExpandColumn;
		
		/// <summary>
		/// The maximum width the {@link #autoExpandColumn}
		/// can have (if enabled). Defaults to 1000.
		/// </summary>
		/// <htmlSummary>
		/// The maximum width the &lt;tt&gt;{@link #autoExpandColumn}&lt;/tt&gt;
		/// can have (if enabled). Defaults to &lt;tt&gt;1000&lt;/tt&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoExpandMax")]
		public System.Number AutoExpandMax;
		
		/// <summary>
		/// The minimum width the {@link #autoExpandColumn}
		/// can have (if enabled). Defaults to 50.
		/// </summary>
		/// <htmlSummary>
		/// The minimum width the &lt;tt&gt;{@link #autoExpandColumn}&lt;/tt&gt;
		/// can have (if enabled). Defaults to &lt;tt&gt;50&lt;/tt&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoExpandMin")]
		public System.Number AutoExpandMin;
		
		/// <summary>
		/// true to add css for column separation lines.
		/// Default is false.
		/// </summary>
		/// <htmlSummary>
		/// &lt;tt&gt;true&lt;/tt&gt; to add css for column separation lines.
		/// Default is &lt;tt&gt;false&lt;/tt&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("columnLines")]
		public bool ColumnLines;
		
		/// <summary>Shorthand for {@link #colModel}.</summary>
		/// <htmlSummary>Shorthand for &lt;tt&gt;{@link #colModel}&lt;/tt&gt;.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("cm")]
		public object Cm;
		
		/// <summary>The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("colModel")]
		public object ColModel;
		
		/// <summary>
		/// An array of {@link Ext.grid.Column columns} to auto create a
		/// {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the
		/// {@link #colModel} configuration property.
		/// </summary>
		/// <htmlSummary>
		/// An array of {@link Ext.grid.Column columns} to auto create a
		/// {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the
		/// &lt;tt&gt;{@link #colModel}&lt;/tt&gt; configuration property.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("columns")]
		public System.Array Columns;
		
		/// <summary>The DD group this GridPanel belongs to. Defaults to &apos;GridDD&apos; if not specified.</summary>
		/// <htmlSummary>The DD group this GridPanel belongs to. Defaults to &lt;tt&gt;&apos;GridDD&apos;&lt;/tt&gt; if not specified.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("ddGroup")]
		public string DdGroup;
		
		/// <summary>
		/// Configures the text in the drag proxy. Defaults to:
		/// 
		/// ddText : &apos;{0} selected row{1}&apos;
		/// {0} is replaced with the number of selected rows.
		/// </summary>
		/// <htmlSummary>
		/// Configures the text in the drag proxy. Defaults to:
		/// &lt;pre&gt;&lt;code&gt;
		/// ddText : &apos;{0} selected row{1}&apos;
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;tt&gt;{0}&lt;/tt&gt; is replaced with the number of selected rows.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("ddText")]
		public string DdText;
		
		/// <summary>
		/// Defaults to true to enable deferred row rendering.  This allows the GridPanel to be initially rendered empty, with the expensive update of the row
		/// structure deferred so that layouts with GridPanels appear more quickly.
		/// </summary>
		/// <htmlSummary>
		/// &lt;P&gt;Defaults to &lt;tt&gt;true&lt;/tt&gt; to enable deferred row rendering.&lt;/p&gt;
		/// &lt;p&gt;This allows the GridPanel to be initially rendered empty, with the expensive update of the row
		/// structure deferred so that layouts with GridPanels appear more quickly.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("deferRowRender")]
		public bool DeferRowRender;
		
		/// <summary>true to disable selections in the grid. Defaults to false.  Ignored if a {@link #selModel SelectionModel} is specified.</summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;tt&gt;true&lt;/tt&gt; to disable selections in the grid. Defaults to &lt;tt&gt;false&lt;/tt&gt;.&lt;/p&gt;
		/// &lt;p&gt;Ignored if a {@link #selModel SelectionModel} is specified.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("disableSelection")]
		public bool DisableSelection;
		
		/// <summary>false to turn off column resizing for the whole grid. Defaults to true.</summary>
		/// <htmlSummary>&lt;tt&gt;false&lt;/tt&gt; to turn off column resizing for the whole grid. Defaults to &lt;tt&gt;true&lt;/tt&gt;.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("enableColumnResize")]
		public bool EnableColumnResize;
		
		/// <summary>
		/// Defaults to true to enable {@link Ext.grid.Column#hidden hiding of columns}
		/// with the {@link #enableHdMenu header menu}.
		/// </summary>
		/// <htmlSummary>
		/// Defaults to &lt;tt&gt;true&lt;/tt&gt; to enable {@link Ext.grid.Column#hidden hiding of columns}
		/// with the {@link #enableHdMenu header menu}.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("enableColumnHide")]
		public bool EnableColumnHide;
		
		/// <summary>
		/// Defaults to true to enable drag and drop reorder of columns. false
		/// to turn off column reordering via drag drop.
		/// </summary>
		/// <htmlSummary>
		/// Defaults to &lt;tt&gt;true&lt;/tt&gt; to enable drag and drop reorder of columns. &lt;tt&gt;false&lt;/tt&gt;
		/// to turn off column reordering via drag drop.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("enableColumnMove")]
		public bool EnableColumnMove;
		
		/// <summary>
		/// Enables dragging of the selected rows of the GridPanel. Defaults to false.  Setting this to true causes this GridPanel&apos;s {@link #getView GridView} to
		/// create an instance of {@link Ext.grid.GridDragZone}. Note: this is available only after
		/// the Grid has been rendered as the GridView&apos;s {@link Ext.grid.GridView#dragZone dragZone}
		/// property.  A cooperating {@link Ext.dd.DropZone DropZone} must be created who&apos;s implementations of
		/// {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
		/// {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
		/// to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;Enables dragging of the selected rows of the GridPanel. Defaults to &lt;tt&gt;false&lt;/tt&gt;.&lt;/p&gt;
		/// &lt;p&gt;Setting this to &lt;b&gt;&lt;tt&gt;true&lt;/tt&gt;&lt;/b&gt; causes this GridPanel&apos;s {@link #getView GridView} to
		/// create an instance of {@link Ext.grid.GridDragZone}. &lt;b&gt;Note&lt;/b&gt;: this is available only &lt;b&gt;after&lt;/b&gt;
		/// the Grid has been rendered as the GridView&apos;s &lt;tt&gt;{@link Ext.grid.GridView#dragZone dragZone}&lt;/tt&gt;
		/// property.&lt;/p&gt;
		/// &lt;p&gt;A cooperating {@link Ext.dd.DropZone DropZone} must be created who&apos;s implementations of
		/// {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
		/// {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
		/// to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("enableDragDrop")]
		public bool EnableDragDrop;
		
		/// <summary>Defaults to true to enable the drop down button for menu in the headers.</summary>
		/// <htmlSummary>Defaults to &lt;tt&gt;true&lt;/tt&gt; to enable the drop down button for menu in the headers.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("enableHdMenu")]
		public bool EnableHdMenu;
		
		/// <summary>True to hide the grid&apos;s header. Defaults to false.</summary>
		/// <htmlSummary>True to hide the grid&apos;s header. Defaults to &lt;code&gt;false&lt;/code&gt;.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("hideHeaders")]
		public bool HideHeaders;
		
		/// <summary>
		/// An {@link Ext.LoadMask} config or true to mask the grid while
		/// loading. Defaults to false.
		/// </summary>
		/// <htmlSummary>
		/// An {@link Ext.LoadMask} config or true to mask the grid while
		/// loading. Defaults to &lt;code&gt;false&lt;/code&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("loadMask")]
		public object LoadMask;
		
		/// <summary>Sets the maximum height of the grid - ignored if autoHeight is not on.</summary>
		/// <htmlSummary>Sets the maximum height of the grid - ignored if &lt;tt&gt;autoHeight&lt;/tt&gt; is not on.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("maxHeight")]
		public System.Number MaxHeight;
		
		/// <summary>The minimum width a column can be resized to. Defaults to 25.</summary>
		/// <htmlSummary>The minimum width a column can be resized to. Defaults to &lt;tt&gt;25&lt;/tt&gt;.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("minColumnWidth")]
		public System.Number MinColumnWidth;
		
		/// <summary>Shorthand for {@link #selModel}.</summary>
		/// <htmlSummary>Shorthand for &lt;tt&gt;{@link #selModel}&lt;/tt&gt;.</htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("sm")]
		public object Sm;
		
		/// <summary>
		/// Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
		/// the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
		/// </summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("selModel")]
		public object SelModel;
		
		/// <summary>The {@link Ext.data.Store} the grid should use as its data source (required).</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("store")]
		public ext.data.Store Store;
		
		/// <summary>
		/// true to stripe the rows. Default is false.
		/// This causes the CSS class x-grid3-row-alt to be added to alternate rows of
		/// the grid. A default CSS rule is provided which sets a background colour, but you can override this
		/// with a rule which either overrides the background-color style using the &apos;!important&apos;
		/// modifier, or which uses a CSS selector of higher specificity.
		/// </summary>
		/// <htmlSummary>
		/// &lt;tt&gt;true&lt;/tt&gt; to stripe the rows. Default is &lt;tt&gt;false&lt;/tt&gt;.
		/// &lt;p&gt;This causes the CSS class &lt;tt&gt;&lt;b&gt;x-grid3-row-alt&lt;/b&gt;&lt;/tt&gt; to be added to alternate rows of
		/// the grid. A default CSS rule is provided which sets a background colour, but you can override this
		/// with a rule which either overrides the &lt;b&gt;background-color&lt;/b&gt; style using the &apos;!important&apos;
		/// modifier, or which uses a CSS selector of higher specificity.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("stripeRows")]
		public bool StripeRows;
		
		/// <summary>
		/// True to highlight rows when the mouse is over. Default is true
		/// for GridPanel, but false for EditorGridPanel.
		/// </summary>
		/// <htmlSummary>
		/// True to highlight rows when the mouse is over. Default is &lt;tt&gt;true&lt;/tt&gt;
		/// for GridPanel, but &lt;tt&gt;false&lt;/tt&gt; for EditorGridPanel.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("trackMouseOver")]
		public bool TrackMouseOver;
		
		/// <summary>
		/// An array of events that, when fired, should trigger this component to save its state.
		/// Defaults to: 
		/// stateEvents: [&apos;columnmove&apos;, &apos;columnresize&apos;, &apos;sortchange&apos;, &apos;groupchange&apos;]
		///  These can be any types of events supported by this component, including browser or
		/// custom events (e.g., [&apos;click&apos;, &apos;customerchange&apos;]).  See {@link Ext.Component#stateful} for an explanation of saving and restoring
		/// Component state.
		/// </summary>
		/// <htmlSummary>
		/// An array of events that, when fired, should trigger this component to save its state.
		/// Defaults to:&lt;pre&gt;&lt;code&gt;
		/// stateEvents: [&apos;columnmove&apos;, &apos;columnresize&apos;, &apos;sortchange&apos;, &apos;groupchange&apos;]
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;These can be any types of events supported by this component, including browser or
		/// custom events (e.g., &lt;tt&gt;[&apos;click&apos;, &apos;customerchange&apos;]&lt;/tt&gt;).&lt;/p&gt;
		/// &lt;p&gt;See {@link Ext.Component#stateful} for an explanation of saving and restoring
		/// Component state.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("stateEvents")]
		public System.Array StateEvents;
		
		/// <summary>
		/// The {@link Ext.grid.GridView} used by the grid. This can be set
		/// before a call to {@link Ext.Component#render render()}.
		/// </summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("view")]
		public object View;
		
		/// <summary>
		/// An array of events that, when fired, should be bubbled to any parent container.
		/// See {@link Ext.util.Observable#enableBubble}.
		/// Defaults to [].
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;An array of events that, when fired, should be bubbled to any parent container.
		/// See {@link Ext.util.Observable#enableBubble}.
		/// Defaults to &lt;tt&gt;[]&lt;/tt&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("bubbleEvents")]
		public System.Array BubbleEvents;
		
		/// <summary>
		/// A config object that will be applied to the grid&apos;s UI view. Any of
		/// the config options available for {@link Ext.grid.GridView} can be specified here. This option
		/// is ignored if {@link #view} is specified.
		/// </summary>
		/// <htmlSummary>
		/// A config object that will be applied to the grid&apos;s UI view. Any of
		/// the config options available for {@link Ext.grid.GridView} can be specified here. This option
		/// is ignored if &lt;tt&gt;{@link #view}&lt;/tt&gt; is specified.
		/// </htmlSummary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("viewConfig")]
		public object ViewConfig;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("activeItem")]
		public ext.auto.System_String_Or_System_Number ActiveItem;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoDestroy")]
		public bool AutoDestroy;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoLoad")]
		public ext.auto.System_Object_Or_System_String_Or_System_Delegate AutoLoad;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoWidth")]
		public bool AutoWidth;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("bufferResize")]
		public ext.auto.System_Boolean_Or_System_Number BufferResize;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("defaultType")]
		public string DefaultType;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("defaults")]
		public object Defaults;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("hideBorders")]
		public bool HideBorders;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("items")]
		public object Items;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("layout")]
		public string Layout;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("layoutConfig")]
		public object LayoutConfig;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("monitorResize")]
		public bool MonitorResize;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("allowDomMove")]
		public string AllowDomMove;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoEl")]
		public string AutoEl;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("applyTo")]
		public string ApplyTo;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("autoScroll")]
		public string AutoScroll;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("bodyBorder")]
		public string BodyBorder;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("bodyStyle")]
		public string BodyStyle;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("contentEl")]
		public string ContentEl;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("disabledClass")]
		public string DisabledClass;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("elements")]
		public string Elements;
		
		/// <summary>@hide</summary>
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("html")]
		public string Html;
		
		/// <definedin>src\widgets\grid\GridPanel.js</definedin>
		[ScriptName("preventBodyReset")]
		public bool PreventBodyReset;
		#endregion
		
		#region ext.Panel_Configuration Members
		/// <summary>
		/// A {@link Ext.DomHelper DomHelper} element specification object may be specified for any
		/// Panel Element.  By default, the Default element in the table below will be used for the html markup to
		/// create a child element with the commensurate Default class name (baseCls will be
		/// replaced by {@link #baseCls}):  
		/// Panel Default Default Custom Additional Additional
		/// Element element class element class style
		/// ======== ========================== ========= ============== ===========
		/// {@link #header} div {@link #baseCls}+&apos;-header&apos; {@link #headerCfg} headerCssClass headerStyle
		/// {@link #bwrap} div {@link #baseCls}+&apos;-bwrap&apos; {@link #bwrapCfg} bwrapCssClass bwrapStyle
		/// + tbar div {@link #baseCls}+&apos;-tbar&apos; {@link #tbarCfg} tbarCssClass tbarStyle
		/// + {@link #body} div {@link #baseCls}+&apos;-body&apos; {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle}
		/// + bbar div {@link #baseCls}+&apos;-bbar&apos; {@link #bbarCfg} bbarCssClass bbarStyle
		/// + {@link #footer} div {@link #baseCls}+&apos;-footer&apos; {@link #footerCfg}...
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.DomHelper DomHelper} element specification object may be specified for any
		/// Panel Element.&lt;/p&gt;
		/// &lt;p&gt;By default, the Default element in the table below will be used for the html markup to
		/// create a child element with the commensurate Default class name (&lt;code&gt;baseCls&lt;/code&gt; will be
		/// replaced by &lt;code&gt;{@link #baseCls}&lt;/code&gt;):&lt;/p&gt;
		/// &lt;pre&gt;
		/// Panel Default Default Custom Additional Additional
		/// Element element class element class style
		/// ======== ========================== ========= ============== ===========
		/// {@link #header} div {@link #baseCls}+&apos;-header&apos; {@link #headerCfg} headerCssClass headerStyle
		/// {@link #bwrap} div {@link #baseCls}+&apos;-bwrap&apos; {@link #bwrapCfg} bwrapCssClass bwrapStyle
		/// + tbar div {@link #baseCls}+&apos;-tbar&apos; {@link #tbarCfg} tbarCssClass tbarStyle
		/// + {@link #body} div {@link #baseCls}+&apos;-body&apos; {@link #bodyCfg} {@link #bodyCssClass} {@link #bodyStyle}
		/// + bbar div {@link #baseCls}+&apos;-bbar&apos; {@link #bbarCfg} bbarCssClass bbarStyle
		/// + {@link #footer} div {@link #baseCls}+&apos;-footer&apos; {@link #footerCfg} footerCssClass footerStyle
		/// &lt;/pre&gt;
		/// &lt;p&gt;Configuring a Custom element may be used, for example, to force the {@link #body} Element
		/// to use a different form of markup than is created by default. An example of this might be
		/// to {@link Ext.Element#createChild create a child} Panel containing a custom content, such as
		/// a header, or forcing centering of all Panel content by having the body be a &amp;lt;center&amp;gt;
		/// element:&lt;/p&gt;
		/// &lt;pre&gt;&lt;code&gt;
		/// new Ext.Panel({
		/// title: &apos;Message Title&apos;,
		/// renderTo: Ext.getBody(),
		/// width: 200, height: 130,
		/// &lt;b&gt;bodyCfg&lt;/b&gt;: {
		/// tag: &apos;center&apos;,
		/// cls: &apos;x-panel-body&apos;, // Default class not applied if Custom element specified
		/// html: &apos;Message&apos;
		/// },
		/// footerCfg: {
		/// tag: &apos;h2&apos;,
		/// cls: &apos;x-panel-footer&apos;, // same as the Default class
		/// html: &apos;footer html&apos;
		/// },
		/// footerCssClass: &apos;custom-footer&apos;, // additional css class, see {@link Ext.element#addClass addClass}
		/// footerStyle: &apos;background-color:red&apos; // see {@link #bodyStyle}
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;The example above also explicitly creates a &lt;code&gt;{@link #footer}&lt;/code&gt; with custom markup and
		/// styling applied.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("bodyCfg")]
		public object BodyCfg;
		
		/// <summary>
		/// A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #header} Element. See {@link #bodyCfg} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #header} Element. See &lt;code&gt;{@link #bodyCfg}&lt;/code&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("headerCfg")]
		public object HeaderCfg;
		
		/// <summary>
		/// A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #bwrap} Element. See {@link #bodyCfg} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #bwrap} Element. See &lt;code&gt;{@link #bodyCfg}&lt;/code&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("bwrapCfg")]
		public object BwrapCfg;
		
		/// <summary>
		/// A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #tbar} Element. See {@link #bodyCfg} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #tbar} Element. See &lt;code&gt;{@link #bodyCfg}&lt;/code&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("tbarCfg")]
		public object TbarCfg;
		
		/// <summary>
		/// A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #bbar} Element. See {@link #bodyCfg} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #bbar} Element. See &lt;code&gt;{@link #bodyCfg}&lt;/code&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("bbarCfg")]
		public object BbarCfg;
		
		/// <summary>
		/// A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #footer} Element. See {@link #bodyCfg} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.DomHelper DomHelper} element specification object specifying the element structure
		/// of this Panel&apos;s {@link #footer} Element. See &lt;code&gt;{@link #bodyCfg}&lt;/code&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("footerCfg")]
		public object FooterCfg;
		
		/// <summary>
		/// Panels themselves do not directly support being closed, but some Panel subclasses do (like
		/// {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify true
		/// to enable closing in such situations. Defaults to false.
		/// </summary>
		/// <htmlSummary>
		/// Panels themselves do not directly support being closed, but some Panel subclasses do (like
		/// {@link Ext.Window}) or a Panel Class within an {@link Ext.TabPanel}. Specify &lt;code&gt;true&lt;/code&gt;
		/// to enable closing in such situations. Defaults to &lt;code&gt;false&lt;/code&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("closable")]
		public bool Closable;
		
		/// <summary>
		/// The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of
		/// buttons/button configs to be added to the toolbar. Note that this is not available as a property after render.
		/// To access the top toolbar after render, use {@link #getTopToolbar}.  Note: Although a Toolbar may contain Field components, these will not be updated by a load
		/// of an ancestor FormPanel. A Panel&apos;s toolbars are not part of the standard Container-&gt;Component hierarchy, and
		/// so are not scanned to collect form items. However, the values will be submitted because form
		/// submission parameters are collected from the DOM tree.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;The top toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of
		/// buttons/button configs to be added to the toolbar. Note that this is not available as a property after render.
		/// To access the top toolbar after render, use {@link #getTopToolbar}.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Although a Toolbar may contain Field components, these will &lt;b&gt;not&lt;/b&gt; be updated by a load
		/// of an ancestor FormPanel. A Panel&apos;s toolbars are not part of the standard Container-&gt;Component hierarchy, and
		/// so are not scanned to collect form items. However, the values &lt;b&gt;will&lt;/b&gt; be submitted because form
		/// submission parameters are collected from the DOM tree.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("tbar")]
		public ext.auto.System_Object_Or_System_Array Tbar;
		
		/// <summary>
		/// The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of
		/// buttons/button configs to be added to the toolbar. Note that this is not available as a property after render.
		/// To access the bottom toolbar after render, use {@link #getBottomToolbar}.  Note: Although a Toolbar may contain Field components, these will not be updated by a load
		/// of an ancestor FormPanel. A Panel&apos;s toolbars are not part of the standard Container-&gt;Component hierarchy, and
		/// so are not scanned to collect form items. However, the values will be submitted because form
		/// submission parameters are collected from the DOM tree.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;The bottom toolbar of the panel. This can be a {@link Ext.Toolbar} object, a toolbar config, or an array of
		/// buttons/button configs to be added to the toolbar. Note that this is not available as a property after render.
		/// To access the bottom toolbar after render, use {@link #getBottomToolbar}.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Although a Toolbar may contain Field components, these will &lt;b&gt;not&lt;/b&gt; be updated by a load
		/// of an ancestor FormPanel. A Panel&apos;s toolbars are not part of the standard Container-&gt;Component hierarchy, and
		/// so are not scanned to collect form items. However, the values &lt;b&gt;will&lt;/b&gt; be submitted because form
		/// submission parameters are collected from the DOM tree.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("bbar")]
		public ext.auto.System_Object_Or_System_Array Bbar;
		
		/// <summary>
		/// A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of
		/// {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel&apos;s footer element.  After render, the fbar property will be an {@link Ext.Toolbar Toolbar} instance.  If {@link #buttons} are specified, they will supersede the fbar configuration property. 
		/// The Panel&apos;s {@link #buttonAlign} configuration affects the layout of these items, for example:
		/// 
		/// var w = new Ext.Window({
		/// height: 250,
		/// width: 500,
		/// bbar: new Ext.Toolbar({
		/// items: [{
		/// text: &apos;bbar Left&apos;
		/// },&apos;-&gt;&apos;,{
		/// text: &apos;bbar Right&apos;
		/// }]
		/// }),
		/// {@link #buttonAlign}: &apos;left&apos;, // anything but &apos;center&apos; or &apos;right&apos; and you can use &apos;-&apos;, and &apos;-&gt;&apos;
		/// // to control the alignment of fbar items
		/// fbar: [{
		/// text: &apos;fbar Left&apos;
		/// },&apos;-&gt;&apos;,{
		/// text: &apos;fbar Right&apos;
		/// }]
		/// }).show();
		///  Note: Although a Toolbar may contain Field components, these will not be updated by a load
		/// of an ancestor FormPanel. A Panel&apos;s...
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A {@link Ext.Toolbar Toolbar} object, a Toolbar config, or an array of
		/// {@link Ext.Button Button}s/{@link Ext.Button Button} configs, describing a {@link Ext.Toolbar Toolbar} to be rendered into this Panel&apos;s footer element.&lt;/p&gt;
		/// &lt;p&gt;After render, the &lt;code&gt;fbar&lt;/code&gt; property will be an {@link Ext.Toolbar Toolbar} instance.&lt;/p&gt;
		/// &lt;p&gt;If &lt;code&gt;{@link #buttons}&lt;/code&gt; are specified, they will supersede the &lt;code&gt;fbar&lt;/code&gt; configuration property.&lt;/p&gt;
		/// The Panel&apos;s &lt;code&gt;{@link #buttonAlign}&lt;/code&gt; configuration affects the layout of these items, for example:
		/// &lt;pre&gt;&lt;code&gt;
		/// var w = new Ext.Window({
		/// height: 250,
		/// width: 500,
		/// bbar: new Ext.Toolbar({
		/// items: [{
		/// text: &apos;bbar Left&apos;
		/// },&apos;-&gt;&apos;,{
		/// text: &apos;bbar Right&apos;
		/// }]
		/// }),
		/// {@link #buttonAlign}: &apos;left&apos;, // anything but &apos;center&apos; or &apos;right&apos; and you can use &apos;-&apos;, and &apos;-&gt;&apos;
		/// // to control the alignment of fbar items
		/// fbar: [{
		/// text: &apos;fbar Left&apos;
		/// },&apos;-&gt;&apos;,{
		/// text: &apos;fbar Right&apos;
		/// }]
		/// }).show();
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Although a Toolbar may contain Field components, these will &lt;b&gt;not&lt;/b&gt; be updated by a load
		/// of an ancestor FormPanel. A Panel&apos;s toolbars are not part of the standard Container-&gt;Component hierarchy, and
		/// so are not scanned to collect form items. However, the values &lt;b&gt;will&lt;/b&gt; be submitted because form
		/// submission parameters are collected from the DOM tree.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("fbar")]
		public ext.auto.System_Object_Or_System_Array Fbar;
		
		/// <summary>
		/// true to create the Panel&apos;s header element explicitly, false to skip creating
		/// it. If a {@link #title} is set the header will be created automatically, otherwise it will not.
		/// If a {@link #title} is set but header is explicitly set to false, the header
		/// will not be rendered.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to create the Panel&apos;s header element explicitly, &lt;code&gt;false&lt;/code&gt; to skip creating
		/// it. If a &lt;code&gt;{@link #title}&lt;/code&gt; is set the header will be created automatically, otherwise it will not.
		/// If a &lt;code&gt;{@link #title}&lt;/code&gt; is set but &lt;code&gt;header&lt;/code&gt; is explicitly set to &lt;code&gt;false&lt;/code&gt;, the header
		/// will not be rendered.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("header")]
		public bool Header;
		
		/// <summary>
		/// true to create the footer element explicitly, false to skip creating it. The footer
		/// will be created automatically if {@link #buttons} or a {@link #fbar} have
		/// been configured. See {@link #bodyCfg} for an example.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to create the footer element explicitly, false to skip creating it. The footer
		/// will be created automatically if &lt;code&gt;{@link #buttons}&lt;/code&gt; or a &lt;code&gt;{@link #fbar}&lt;/code&gt; have
		/// been configured. See &lt;code&gt;{@link #bodyCfg}&lt;/code&gt; for an example.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("footer")]
		public bool Footer;
		
		/// <summary>
		/// The title text to be used as innerHTML (html tags are accepted) to display in the panel
		/// {@link #header} (defaults to &apos;&apos;). When a title is specified the
		/// {@link #header} element will automatically be created and displayed unless
		/// {@link #header} is explicitly set to false. If you do not want to specify a
		/// title at config time, but you may want one later, you must either specify a non-empty
		/// title (a blank space &apos; &apos; will do) or header:true so that the container
		/// element will get created.
		/// </summary>
		/// <htmlSummary>
		/// The title text to be used as innerHTML (html tags are accepted) to display in the panel
		/// &lt;code&gt;{@link #header}&lt;/code&gt; (defaults to &apos;&apos;). When a &lt;code&gt;title&lt;/code&gt; is specified the
		/// &lt;code&gt;{@link #header}&lt;/code&gt; element will automatically be created and displayed unless
		/// {@link #header} is explicitly set to &lt;code&gt;false&lt;/code&gt;. If you do not want to specify a
		/// &lt;code&gt;title&lt;/code&gt; at config time, but you may want one later, you must either specify a non-empty
		/// &lt;code&gt;title&lt;/code&gt; (a blank space &apos; &apos; will do) or &lt;code&gt;header:true&lt;/code&gt; so that the container
		/// element will get created.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("title")]
		public string Title;
		
		/// <summary>
		/// buttons will be used as {@link Ext.Container#items items} for the toolbar in
		/// the footer ({@link #fbar}). Typically the value of this configuration property will be
		/// an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects.
		/// If an item is configured with minWidth or the Panel is configured with minButtonWidth,
		/// that width will be applied to the item.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;buttons&lt;/code&gt; will be used as &lt;code&gt;{@link Ext.Container#items items}&lt;/code&gt; for the toolbar in
		/// the footer (&lt;code&gt;{@link #fbar}&lt;/code&gt;). Typically the value of this configuration property will be
		/// an array of {@link Ext.Button}s or {@link Ext.Button} configuration objects.
		/// If an item is configured with &lt;code&gt;minWidth&lt;/code&gt; or the Panel is configured with &lt;code&gt;minButtonWidth&lt;/code&gt;,
		/// that width will be applied to the item.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("buttons")]
		public System.Array Buttons;
		
		/// <summary>
		/// false by default to render with plain 1px square borders. true to render with
		/// 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}).
		/// The template generated for each condition is depicted below:  
		///
		/// // frame = false
		/// &amp;lt;div id=&quot;developer-specified-id-goes-here&quot; class=&quot;x-panel&quot;&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-header&quot;&gt;&amp;lt;span class=&quot;x-panel-header-text&quot;&gt;Title: (frame:false)&amp;lt;/span&gt;&amp;lt;/div&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-bwrap&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-body&quot;&gt;&amp;lt;p&gt;html value goes here&amp;lt;/p&gt;&amp;lt;/div&gt;
		/// &amp;lt;/div&gt;
		/// &amp;lt;/div&gt;
		///
		/// // frame = true (create 9 elements)
		/// &amp;lt;div id=&quot;developer-specified-id-goes-here&quot; class=&quot;x-panel&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-tl&quot;&gt;&amp;lt;div class=&quot;x-panel-tr&quot;&gt;&amp;lt;div class=&quot;x-panel-tc&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-header&quot;&gt;&amp;lt;span class=&quot;x-panel-header-text&quot;&gt;Title: (frame:true)&amp;lt;/span&gt;&amp;lt;/div&gt;
		/// &amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-bwrap&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-ml&quot;&gt;&amp;lt;div class=&quot;x-panel-mr&quot;&gt;&amp;lt;div class=&quot;x-panel-mc&quot;&gt;...
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;false&lt;/code&gt; by default to render with plain 1px square borders. &lt;code&gt;true&lt;/code&gt; to render with
		/// 9 elements, complete with custom rounded corners (also see {@link Ext.Element#boxWrap}).
		/// &lt;p&gt;The template generated for each condition is depicted below:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		///
		/// // frame = false
		/// &amp;lt;div id=&quot;developer-specified-id-goes-here&quot; class=&quot;x-panel&quot;&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-header&quot;&gt;&amp;lt;span class=&quot;x-panel-header-text&quot;&gt;Title: (frame:false)&amp;lt;/span&gt;&amp;lt;/div&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-bwrap&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-body&quot;&gt;&amp;lt;p&gt;html value goes here&amp;lt;/p&gt;&amp;lt;/div&gt;
		/// &amp;lt;/div&gt;
		/// &amp;lt;/div&gt;
		///
		/// // frame = true (create 9 elements)
		/// &amp;lt;div id=&quot;developer-specified-id-goes-here&quot; class=&quot;x-panel&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-tl&quot;&gt;&amp;lt;div class=&quot;x-panel-tr&quot;&gt;&amp;lt;div class=&quot;x-panel-tc&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-header&quot;&gt;&amp;lt;span class=&quot;x-panel-header-text&quot;&gt;Title: (frame:true)&amp;lt;/span&gt;&amp;lt;/div&gt;
		/// &amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-bwrap&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-ml&quot;&gt;&amp;lt;div class=&quot;x-panel-mr&quot;&gt;&amp;lt;div class=&quot;x-panel-mc&quot;&gt;
		/// &amp;lt;div class=&quot;x-panel-body&quot;&gt;&amp;lt;p&gt;html value goes here&amp;lt;/p&gt;&amp;lt;/div&gt;
		/// &amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
		///
		/// &amp;lt;div class=&quot;x-panel-bl&quot;&gt;&amp;lt;div class=&quot;x-panel-br&quot;&gt;&amp;lt;div class=&quot;x-panel-bc&quot;/&gt;
		/// &amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
		/// &amp;lt;/div&gt;
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("frame")]
		public bool Frame;
		
		/// <summary>
		/// True to display the borders of the panel&apos;s body element, false to hide them (defaults to true). By default,
		/// the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false.
		/// </summary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("border")]
		public bool Border;
		
		/// <summary>
		/// Additional css class selector to be applied to the {@link #body} element in the format expected by
		/// {@link Ext.Element#addClass} (defaults to null). See {@link #bodyCfg}.
		/// </summary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("bodyCssClass")]
		public ext.auto.System_Object_Or_System_String_Or_System_Delegate BodyCssClass;
		
		/// <summary>
		/// The CSS class selector that specifies a background image to be used as the header icon (defaults to &apos;&apos;).
		/// An example of specifying a custom icon class would be something like:
		///  
		/// // specify the property in the config for the class:
		/// ...
		/// iconCls: &apos;my-icon&apos;
		///
		/// // css class that specifies background image to be used as the icon image:
		/// .my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
		/// </summary>
		/// <htmlSummary>
		/// The CSS class selector that specifies a background image to be used as the header icon (defaults to &apos;&apos;).
		/// &lt;p&gt;An example of specifying a custom icon class would be something like:
		/// &lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		/// // specify the property in the config for the class:
		/// ...
		/// iconCls: &apos;my-icon&apos;
		///
		/// // css class that specifies background image to be used as the icon image:
		/// .my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("iconCls")]
		public string IconCls;
		
		/// <summary>
		/// True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into
		/// the header tool button area, false to keep the panel statically sized with no button (defaults to false).
		/// </summary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("collapsible")]
		public bool Collapsible;
		
		/// <summary>
		/// An array of tool button configs to be added to the header tool area. When rendered, each tool is
		/// stored as an {@link Ext.Element Element} referenced by a public property called tools.&amp;lt;tool-type&amp;gt; Each tool config may contain the following properties:
		///   id : String Required. The type
		/// of tool to create. By default, this assigns a CSS class of the form x-tool-&amp;lt;tool-type&amp;gt; to the
		/// resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below.
		/// The developer may implement custom tools by supplying alternate CSS rules and background images:
		///     toggle (Created by default when {@link #collapsible} is true)     close     minimize     maximize     restore     gear     pin     unpin     right     left     up     down     refresh     minus     plus     help     search     save     print     handler : Function Required. The function to
		/// call when clicked. Arguments passed are:  event : Ext.EventObject The click event.  ...
		/// </summary>
		/// <htmlSummary>
		/// An array of tool button configs to be added to the header tool area. When rendered, each tool is
		/// stored as an {@link Ext.Element Element} referenced by a public property called &lt;code&gt;&lt;b&gt;&lt;/b&gt;tools.&lt;i&gt;&amp;lt;tool-type&amp;gt;&lt;/i&gt;&lt;/code&gt;
		/// &lt;p&gt;Each tool config may contain the following properties:
		/// &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
		/// &lt;li&gt;&lt;b&gt;id&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Required.&lt;/b&gt; The type
		/// of tool to create. By default, this assigns a CSS class of the form &lt;code&gt;x-tool-&lt;i&gt;&amp;lt;tool-type&amp;gt;&lt;/i&gt;&lt;/code&gt; to the
		/// resulting tool Element. Ext provides CSS rules, and an icon sprite containing images for the tool types listed below.
		/// The developer may implement custom tools by supplying alternate CSS rules and background images:
		/// &lt;ul&gt;
		/// &lt;div class=&quot;x-tool x-tool-toggle&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; toggle&lt;/code&gt; (Created by default when {@link #collapsible} is &lt;code&gt;true&lt;/code&gt;)&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-close&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; close&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-minimize&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; minimize&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-maximize&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; maximize&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-restore&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; restore&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-gear&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; gear&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-pin&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; pin&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-unpin&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; unpin&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-right&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; right&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-left&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; left&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-up&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; up&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-down&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; down&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-refresh&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; refresh&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-minus&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; minus&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-plus&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; plus&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-help&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; help&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-search&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; search&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-save&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; save&lt;/code&gt;&lt;/div&gt;
		/// &lt;div class=&quot;x-tool x-tool-print&quot; style=&quot;float:left; margin-right:5;&quot;&gt; &lt;/div&gt;&lt;div&gt;&lt;code&gt; print&lt;/code&gt;&lt;/div&gt;
		/// &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;handler&lt;/b&gt; : Function&lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Required.&lt;/b&gt; The function to
		/// call when clicked. Arguments passed are:&lt;ul&gt;
		/// &lt;li&gt;&lt;b&gt;event&lt;/b&gt; : Ext.EventObject&lt;div class=&quot;sub-desc&quot;&gt;The click event.&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;toolEl&lt;/b&gt; : Ext.Element&lt;div class=&quot;sub-desc&quot;&gt;The tool Element.&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;panel&lt;/b&gt; : Ext.Panel&lt;div class=&quot;sub-desc&quot;&gt;The host Panel&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;tc&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The tool configuration object&lt;/div&gt;&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;stopEvent&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;Defaults to true. Specify as false to allow click event to propagate.&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;scope&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The scope in which to call the handler.&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;qtip&lt;/b&gt; : String/Object&lt;div class=&quot;sub-desc&quot;&gt;A tip string, or
		/// a config argument to {@link Ext.QuickTip#register}&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;hidden&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to initially render hidden.&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;on&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;A listener config object specifiying
		/// event listeners in the format of an argument to {@link #addListener}&lt;/div&gt;&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;
		/// &lt;p&gt;Note that, apart from the toggle tool which is provided when a panel is collapsible, these
		/// tools only provide the visual button. Any required functionality must be provided by adding
		/// handlers that implement the necessary behavior.&lt;/p&gt;
		/// &lt;p&gt;Example usage:&lt;/p&gt;
		/// &lt;pre&gt;&lt;code&gt;
		/// tools:[{
		/// id:&apos;refresh&apos;,
		/// qtip: &apos;Refresh form Data&apos;,
		/// // hidden:true,
		/// handler: function(event, toolEl, panel){
		/// // refresh logic
		/// }
		/// },
		/// {
		/// id:&apos;help&apos;,
		/// qtip: &apos;Get Help&apos;,
		/// handler: function(event, toolEl, panel){
		/// // whatever
		/// }
		/// }]
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;For the custom id of &lt;code&gt;&apos;help&apos;&lt;/code&gt; define two relevant css classes with a link to
		/// a 15x15 image:&lt;/p&gt;
		/// &lt;pre&gt;&lt;code&gt;
		/// .x-tool-help {background-image: url(images/help.png);}
		/// .x-tool-help-over {background-image: url(images/help_over.png);}
		/// // if using an image sprite:
		/// .x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
		/// .x-tool-help-over {background-position:-15px 0;}
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("tools")]
		public System.Array Tools;
		
		/// <summary>
		/// A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:  
		/// new Ext.Template(&apos;&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;&apos;)  This may may be overridden to provide a custom DOM structure for tools based upon a more
		/// complex XTemplate. The template&apos;s data is a single tool configuration object (Not the entire Array)
		/// as specified in {@link #tools}. In the following example an &amp;lt;a&gt; tag is used to provide a
		/// visual indication when hovering over the tool:  
		/// var win = new Ext.Window({
		/// tools: [{
		/// id: &apos;download&apos;,
		/// href: &apos;/MyPdfDoc.pdf&apos;
		/// }],
		/// toolTemplate: new Ext.XTemplate(
		/// &apos;&amp;lt;tpl if=&quot;id==\&apos;download\&apos;&quot;&gt;&apos;,
		/// &apos;&amp;lt;a class=&quot;x-tool x-tool-pdf&quot; href=&quot;{href}&quot;&gt;&amp;lt;/a&gt;&apos;,
		/// &apos;&amp;lt;/tpl&gt;&apos;,
		/// &apos;&amp;lt;tpl if=&quot;id!=\&apos;download\&apos;&quot;&gt;&apos;,
		/// &apos;&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;&apos;,
		/// &apos;&amp;lt;/tpl&gt;&apos;
		/// ),
		/// width:500,
		/// height:300,
		/// closeAction:&apos;hide&apos;
		/// });  Note that the CSS class &apos;x-tool-pdf&apos; should have an associated style rule which provides an
		/// appropriate...
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A Template used to create {@link #tools} in the {@link #header} Element. Defaults to:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		/// new Ext.Template(&apos;&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;&apos;)&lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;This may may be overridden to provide a custom DOM structure for tools based upon a more
		/// complex XTemplate. The template&apos;s data is a single tool configuration object (Not the entire Array)
		/// as specified in {@link #tools}. In the following example an &amp;lt;a&gt; tag is used to provide a
		/// visual indication when hovering over the tool:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		/// var win = new Ext.Window({
		/// tools: [{
		/// id: &apos;download&apos;,
		/// href: &apos;/MyPdfDoc.pdf&apos;
		/// }],
		/// toolTemplate: new Ext.XTemplate(
		/// &apos;&amp;lt;tpl if=&quot;id==\&apos;download\&apos;&quot;&gt;&apos;,
		/// &apos;&amp;lt;a class=&quot;x-tool x-tool-pdf&quot; href=&quot;{href}&quot;&gt;&amp;lt;/a&gt;&apos;,
		/// &apos;&amp;lt;/tpl&gt;&apos;,
		/// &apos;&amp;lt;tpl if=&quot;id!=\&apos;download\&apos;&quot;&gt;&apos;,
		/// &apos;&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;&apos;,
		/// &apos;&amp;lt;/tpl&gt;&apos;
		/// ),
		/// width:500,
		/// height:300,
		/// closeAction:&apos;hide&apos;
		/// });&lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;Note that the CSS class &apos;x-tool-pdf&apos; should have an associated style rule which provides an
		/// appropriate background image, something like:&lt;/p&gt;
		/// &lt;pre&gt;&lt;code&gt;
		/// a.x-tool-pdf {background-image: url(../shared/extjs/images/pdf.gif)!important;}
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("toolTemplate")]
		public ext.auto.ext_Template_Or_ext_XTemplate ToolTemplate;
		
		/// <summary>
		/// true to hide the expand/collapse toggle button when {@link #collapsible} == true,
		/// false to display it (defaults to false).
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to hide the expand/collapse toggle button when &lt;code&gt;{@link #collapsible} == true&lt;/code&gt;,
		/// &lt;code&gt;false&lt;/code&gt; to display it (defaults to &lt;code&gt;false&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("hideCollapseTool")]
		public bool HideCollapseTool;
		
		/// <summary>
		/// true to allow expanding and collapsing the panel (when {@link #collapsible} = true)
		/// by clicking anywhere in the header bar, false) to allow it only by clicking to tool button
		/// (defaults to false)). If this panel is a child item of a border layout also see the
		/// {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
		/// {@link Ext.layout.BorderLayout.Region#floatable floatable} config option.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to allow expanding and collapsing the panel (when &lt;code&gt;{@link #collapsible} = true&lt;/code&gt;)
		/// by clicking anywhere in the header bar, &lt;code&gt;false&lt;/code&gt;) to allow it only by clicking to tool button
		/// (defaults to &lt;code&gt;false&lt;/code&gt;)). If this panel is a child item of a border layout also see the
		/// {@link Ext.layout.BorderLayout.Region BorderLayout.Region}
		/// &lt;code&gt;{@link Ext.layout.BorderLayout.Region#floatable floatable}&lt;/code&gt; config option.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("titleCollapse")]
		public bool TitleCollapse;
		
		/// <summary>
		/// This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
		/// configuration property are:    false : Default. Display the panel inline where it is
		/// rendered.   true :  Float the panel (absolute position it with automatic
		/// shimming and shadow).  Setting floating to true will create an Ext.Layer for this panel and display the
		/// panel at negative offsets so that it is hidden.  Since the panel will be absolute positioned, the position must be set explicitly
		/// after render (e.g., myPanel.setPosition(100,100);).  Note: when floating a panel you should always assign a fixed width,
		/// otherwise it will be auto width and will expand to fill to the right edge of the viewport.     {@link Ext.Layer object} :  The specified object will be used
		/// as the configuration object for the {@link Ext.Layer} that will be created.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;This property is used to configure the underlying {@link Ext.Layer}. Acceptable values for this
		/// configuration property are:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
		/// &lt;li&gt;&lt;b&gt;&lt;code&gt;false&lt;/code&gt;&lt;/b&gt; : &lt;b&gt;Default.&lt;/b&gt;&lt;div class=&quot;sub-desc&quot;&gt;Display the panel inline where it is
		/// rendered.&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;&lt;code&gt;true&lt;/code&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;Float the panel (absolute position it with automatic
		/// shimming and shadow).&lt;ul&gt;
		/// &lt;div class=&quot;sub-desc&quot;&gt;Setting floating to true will create an Ext.Layer for this panel and display the
		/// panel at negative offsets so that it is hidden.&lt;/div&gt;
		/// &lt;div class=&quot;sub-desc&quot;&gt;Since the panel will be absolute positioned, the position must be set explicitly
		/// &lt;i&gt;after&lt;/i&gt; render (e.g., &lt;code&gt;myPanel.setPosition(100,100);&lt;/code&gt;).&lt;/div&gt;
		/// &lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Note&lt;/b&gt;: when floating a panel you should always assign a fixed width,
		/// otherwise it will be auto width and will expand to fill to the right edge of the viewport.&lt;/div&gt;
		/// &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
		/// &lt;li&gt;&lt;b&gt;&lt;code&gt;{@link Ext.Layer object}&lt;/code&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The specified object will be used
		/// as the configuration object for the {@link Ext.Layer} that will be created.&lt;/div&gt;&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("floating")]
		public object Floating;
		
		/// <summary>
		/// true (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
		/// panel, false to display no shadow (defaults to &apos;sides&apos;). Note that this option
		/// only applies when {@link #floating} = true.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the
		/// panel, &lt;code&gt;false&lt;/code&gt; to display no shadow (defaults to &lt;code&gt;&apos;sides&apos;&lt;/code&gt;). Note that this option
		/// only applies when &lt;code&gt;{@link #floating} = true&lt;/code&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("shadow")]
		public ext.auto.System_Boolean_Or_System_String Shadow;
		
		/// <summary>
		/// The number of pixels to offset the shadow if displayed (defaults to 4). Note that this
		/// option only applies when {@link #floating} = true.
		/// </summary>
		/// <htmlSummary>
		/// The number of pixels to offset the shadow if displayed (defaults to &lt;code&gt;4&lt;/code&gt;). Note that this
		/// option only applies when &lt;code&gt;{@link #floating} = true&lt;/code&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("shadowOffset")]
		public System.Number ShadowOffset;
		
		/// <summary>
		/// false to disable the iframe shim in browsers which need one (defaults to true).
		/// Note that this option only applies when {@link #floating} = true.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;false&lt;/code&gt; to disable the iframe shim in browsers which need one (defaults to &lt;code&gt;true&lt;/code&gt;).
		/// Note that this option only applies when &lt;code&gt;{@link #floating} = true&lt;/code&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("shim")]
		public bool Shim;
		
		/// <summary>
		/// A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding}
		/// used to assign custom key handling to this panel (defaults to null).
		/// </summary>
		/// <htmlSummary>
		/// A {@link Ext.KeyMap} config object (in the format expected by {@link Ext.KeyMap#addBinding}
		/// used to assign custom key handling to this panel (defaults to &lt;code&gt;null&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("keys")]
		public ext.auto.System_Object_Or_System_Array Keys;
		
		/// <summary>
		/// true to enable dragging of this Panel (defaults to false).  For custom drag/drop implementations, an Ext.Panel.DD config could also be passed
		/// in this config instead of true. Ext.Panel.DD is an internal, undocumented class which
		/// moves a proxy Element around in place of the Panel&apos;s element, but provides no other behaviour
		/// during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be
		/// added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.:
		/// 
		/// new Ext.Panel({
		/// title: &apos;Drag me&apos;,
		/// x: 100,
		/// y: 100,
		/// renderTo: Ext.getBody(),
		/// floating: true,
		/// frame: true,
		/// width: 400,
		/// height: 200,
		/// draggable: {
		/// // Config option of Ext.Panel.DD class.
		/// // It&apos;s a floating Panel, so do not show a placeholder proxy in the original position.
		/// insertProxy: false,
		///
		/// // Called for each mousemove event while dragging the DD object.
		/// onDrag : function(e){
		/// // Record the x,y position of the drag proxy so that we can
		/// // position the Panel at end of drag.
		/// ..
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;code&gt;true&lt;/code&gt; to enable dragging of this Panel (defaults to &lt;code&gt;false&lt;/code&gt;).&lt;/p&gt;
		/// &lt;p&gt;For custom drag/drop implementations, an &lt;b&gt;Ext.Panel.DD&lt;/b&gt; config could also be passed
		/// in this config instead of &lt;code&gt;true&lt;/code&gt;. Ext.Panel.DD is an internal, undocumented class which
		/// moves a proxy Element around in place of the Panel&apos;s element, but provides no other behaviour
		/// during dragging or on drop. It is a subclass of {@link Ext.dd.DragSource}, so behaviour may be
		/// added by implementing the interface methods of {@link Ext.dd.DragDrop} e.g.:
		/// &lt;pre&gt;&lt;code&gt;
		/// new Ext.Panel({
		/// title: &apos;Drag me&apos;,
		/// x: 100,
		/// y: 100,
		/// renderTo: Ext.getBody(),
		/// floating: true,
		/// frame: true,
		/// width: 400,
		/// height: 200,
		/// draggable: {
		/// // Config option of Ext.Panel.DD class.
		/// // It&amp;#39;s a floating Panel, so do not show a placeholder proxy in the original position.
		/// insertProxy: false,
		///
		/// // Called for each mousemove event while dragging the DD object.
		/// onDrag : function(e){
		/// // Record the x,y position of the drag proxy so that we can
		/// // position the Panel at end of drag.
		/// var pel = this.proxy.getEl();
		/// this.x = pel.getLeft(true);
		/// this.y = pel.getTop(true);
		///
		/// // Keep the Shadow aligned if there is one.
		/// var s = this.panel.getEl().shadow;
		/// if (s) {
		/// s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
		/// }
		/// },
		///
		/// // Called on the mouseup event.
		/// endDrag : function(e){
		/// this.panel.setPosition(this.x, this.y);
		/// }
		/// }
		/// }).show();
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("draggable")]
		public ext.auto.System_Boolean_Or_System_Object Draggable;
		
		/// <summary>
		/// Render this panel disabled (default is false). An important note when using the disabled
		/// config on panels is that IE will often fail to initialize the disabled mask element correectly if
		/// the panel&apos;s layout has not yet completed by the time the Panel is disabled during the render process.
		/// If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize
		/// the disabled state:
		/// 
		/// new Ext.Panel({
		/// ...
		/// listeners: {
		/// &apos;afterlayout&apos;: {
		/// fn: function(p){
		/// p.disable();
		/// },
		/// single: true // important, as many layouts can occur
		/// }
		/// }
		/// });
		/// </summary>
		/// <htmlSummary>
		/// Render this panel disabled (default is &lt;code&gt;false&lt;/code&gt;). An important note when using the disabled
		/// config on panels is that IE will often fail to initialize the disabled mask element correectly if
		/// the panel&apos;s layout has not yet completed by the time the Panel is disabled during the render process.
		/// If you experience this issue, you may need to instead use the {@link #afterlayout} event to initialize
		/// the disabled state:
		/// &lt;pre&gt;&lt;code&gt;
		/// new Ext.Panel({
		/// ...
		/// listeners: {
		/// &apos;afterlayout&apos;: {
		/// fn: function(p){
		/// p.disable();
		/// },
		/// single: true // important, as many layouts can occur
		/// }
		/// }
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("disabled")]
		public bool Disabled;
		
		/// <summary>
		/// true to use height:&apos;auto&apos;, false to use fixed height (defaults to false).
		/// Note: Setting autoHeight: true means that the browser will manage the panel&apos;s height
		/// based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
		/// manages dimensions (fit, border, etc.) then setting autoHeight: true
		/// can cause issues with scrolling and will not generally work as expected since the panel will take
		/// on the height of its contents rather than the height required by the Ext layout.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to use height:&apos;auto&apos;, &lt;code&gt;false&lt;/code&gt; to use fixed height (defaults to &lt;code&gt;false&lt;/code&gt;).
		/// &lt;b&gt;Note&lt;/b&gt;: Setting &lt;code&gt;autoHeight: true&lt;/code&gt; means that the browser will manage the panel&apos;s height
		/// based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
		/// manages dimensions (&lt;code&gt;fit&lt;/code&gt;, &lt;code&gt;border&lt;/code&gt;, etc.) then setting &lt;code&gt;autoHeight: true&lt;/code&gt;
		/// can cause issues with scrolling and will not generally work as expected since the panel will take
		/// on the height of its contents rather than the height required by the Ext layout.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("autoHeight")]
		public bool AutoHeight;
		
		/// <summary>
		/// The base CSS class to apply to this panel&apos;s element (defaults to &apos;x-panel&apos;).
		/// Another option available by default is to specify &apos;x-plain&apos; which strips all styling
		/// except for required attributes for Ext layouts to function (e.g. overflow:hidden).
		/// See {@link #unstyled} also.
		/// </summary>
		/// <htmlSummary>
		/// The base CSS class to apply to this panel&apos;s element (defaults to &lt;code&gt;&apos;x-panel&apos;&lt;/code&gt;).
		/// &lt;p&gt;Another option available by default is to specify &lt;code&gt;&apos;x-plain&apos;&lt;/code&gt; which strips all styling
		/// except for required attributes for Ext layouts to function (e.g. overflow:hidden).
		/// See &lt;code&gt;{@link #unstyled}&lt;/code&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("baseCls")]
		public string BaseCls;
		
		/// <summary>
		/// A CSS class to add to the panel&apos;s element after it has been collapsed (defaults to
		/// &apos;x-panel-collapsed&apos;).
		/// </summary>
		/// <htmlSummary>
		/// A CSS class to add to the panel&apos;s element after it has been collapsed (defaults to
		/// &lt;code&gt;&apos;x-panel-collapsed&apos;&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("collapsedCls")]
		public string CollapsedCls;
		
		/// <summary>
		/// true to mask the panel when it is {@link #disabled}, false to not mask it (defaults
		/// to true). Either way, the panel will always tell its contained elements to disable themselves
		/// when it is disabled, but masking the panel can provide an additional visual cue that the panel is
		/// disabled.
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to mask the panel when it is {@link #disabled}, &lt;code&gt;false&lt;/code&gt; to not mask it (defaults
		/// to &lt;code&gt;true&lt;/code&gt;). Either way, the panel will always tell its contained elements to disable themselves
		/// when it is disabled, but masking the panel can provide an additional visual cue that the panel is
		/// disabled.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("maskDisabled")]
		public bool MaskDisabled;
		
		/// <summary>
		/// true to animate the transition when the panel is collapsed, false to skip the
		/// animation (defaults to true if the {@link Ext.Fx} class is available, otherwise false).
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to animate the transition when the panel is collapsed, &lt;code&gt;false&lt;/code&gt; to skip the
		/// animation (defaults to &lt;code&gt;true&lt;/code&gt; if the {@link Ext.Fx} class is available, otherwise &lt;code&gt;false&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("animCollapse")]
		public bool AnimCollapse;
		
		/// <summary>
		/// true to display the panel {@link #title} in the {@link #header},
		/// false to hide it (defaults to true).
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to display the panel &lt;code&gt;{@link #title}&lt;/code&gt; in the &lt;code&gt;{@link #header}&lt;/code&gt;,
		/// &lt;code&gt;false&lt;/code&gt; to hide it (defaults to &lt;code&gt;true&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("headerAsText")]
		public bool HeaderAsText;
		
		/// <summary>
		/// The alignment of any {@link #buttons} added to this panel. Valid values are &apos;right&apos;,
		/// &apos;left&apos; and &apos;center&apos; (defaults to &apos;right&apos;).
		/// </summary>
		/// <htmlSummary>
		/// The alignment of any {@link #buttons} added to this panel. Valid values are &lt;code&gt;&apos;right&apos;&lt;/code&gt;,
		/// &lt;code&gt;&apos;left&apos;&lt;/code&gt; and &lt;code&gt;&apos;center&apos;&lt;/code&gt; (defaults to &lt;code&gt;&apos;right&apos;&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("buttonAlign")]
		public string ButtonAlign;
		
		/// <summary>
		/// true to render the panel collapsed, false to render it expanded (defaults to
		/// false).
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to render the panel collapsed, &lt;code&gt;false&lt;/code&gt; to render it expanded (defaults to
		/// &lt;code&gt;false&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("collapsed")]
		public bool Collapsed;
		
		/// <summary>
		/// true to make sure the collapse/expand toggle button always renders first (to the left of)
		/// any other tools in the panel&apos;s title bar, false to render it last (defaults to true).
		/// </summary>
		/// <htmlSummary>
		/// &lt;code&gt;true&lt;/code&gt; to make sure the collapse/expand toggle button always renders first (to the left of)
		/// any other tools in the panel&apos;s title bar, &lt;code&gt;false&lt;/code&gt; to render it last (defaults to &lt;code&gt;true&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("collapseFirst")]
		public bool CollapseFirst;
		
		/// <summary>Minimum width in pixels of all {@link #buttons} in this panel (defaults to 75)</summary>
		/// <htmlSummary>Minimum width in pixels of all {@link #buttons} in this panel (defaults to &lt;code&gt;75&lt;/code&gt;)</htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("minButtonWidth")]
		public System.Number MinButtonWidth;
		
		/// <summary>
		/// Overrides the {@link #baseCls} setting to {@link #baseCls} = &apos;x-plain&apos; which renders
		/// the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
		/// </summary>
		/// <htmlSummary>
		/// Overrides the &lt;code&gt;{@link #baseCls}&lt;/code&gt; setting to &lt;code&gt;{@link #baseCls} = &apos;x-plain&apos;&lt;/code&gt; which renders
		/// the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("unstyled")]
		public bool Unstyled;
		
		/// <summary>
		/// A shortcut for setting a padding style on the body element. The value can either be
		/// a number to be applied to all sides, or a normal css string describing padding.
		/// Defaults to undefined.
		/// </summary>
		/// <htmlSummary>
		/// A shortcut for setting a padding style on the body element. The value can either be
		/// a number to be applied to all sides, or a normal css string describing padding.
		/// Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
		/// </htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("padding")]
		public ext.auto.System_String_Or_System_Number Padding;
		
		/// <summary>The event to listen to for resizing in layouts. Defaults to &apos;bodyresize&apos;.</summary>
		/// <htmlSummary>The event to listen to for resizing in layouts. Defaults to &lt;tt&gt;&apos;bodyresize&apos;&lt;/tt&gt;.</htmlSummary>
		/// <definedin>src\widgets\Panel.js</definedin>
		[ScriptName("resizeEvent")]
		public string ResizeEvent;
		
		/// <summary>
		/// If true the container will force a layout initially even if hidden or collapsed. This option
		/// is useful for forcing forms to render in collapsed or hidden containers. (defaults to false).
		/// </summary>
		/// <definedin>src\widgets\Container.js</definedin>
		[ScriptName("forceLayout")]
		public bool ForceLayout;
		
		/// <summary>
		/// Note: this config is only used when this Component is rendered
		/// by a Container which has been configured to use a {@link Ext.layout.BoxLayout BoxLayout}.
		/// Each child Component with a flex property will be flexed either vertically (by a VBoxLayout)
		/// or horizontally (by an HBoxLayout) according to the item&apos;s relativeflex value
		/// compared to the sum of all Components with flex value specified. Any child items that have
		/// either a flex = 0 or flex = undefined will not be &apos;flexed&apos; (the initial size will not be changed).
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this Component is rendered
		/// by a Container which has been configured to use a &lt;b&gt;{@link Ext.layout.BoxLayout BoxLayout}.&lt;/b&gt;
		/// Each child Component with a &lt;code&gt;flex&lt;/code&gt; property will be flexed either vertically (by a VBoxLayout)
		/// or horizontally (by an HBoxLayout) according to the item&apos;s &lt;b&gt;relative&lt;/b&gt; &lt;code&gt;flex&lt;/code&gt; value
		/// compared to the sum of all Components with &lt;code&gt;flex&lt;/code&gt; value specified. Any child items that have
		/// either a &lt;code&gt;flex = 0&lt;/code&gt; or &lt;code&gt;flex = undefined&lt;/code&gt; will not be &apos;flexed&apos; (the initial size will not be changed).
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("flex")]
		public System.Number Flex;
		
		/// <summary>
		/// Note: this config is only used when this Component is rendered
		/// by a Container which has been configured to use an {@link Ext.layout.AnchorLayout AnchorLayout} (or subclass thereof).
		/// based layout manager, for example:   {@link Ext.form.FormPanel}  specifying layout: &apos;anchor&apos; // or &apos;form&apos;, or &apos;absolute&apos;     See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this Component is rendered
		/// by a Container which has been configured to use an &lt;b&gt;{@link Ext.layout.AnchorLayout AnchorLayout} (or subclass thereof).&lt;/b&gt;
		/// based layout manager, for example:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
		/// &lt;li&gt;{@link Ext.form.FormPanel}&lt;/li&gt;
		/// &lt;li&gt;specifying &lt;code&gt;layout: &apos;anchor&apos; // or &apos;form&apos;, or &apos;absolute&apos;&lt;/code&gt;&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
		/// &lt;p&gt;See {@link Ext.layout.AnchorLayout}.{@link Ext.layout.AnchorLayout#anchor anchor} also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("anchor")]
		public string Anchor;
		
		/// <summary>
		/// Note: this config is only used when this BoxComponent is a child item of a TabPanel. 
		/// A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over
		/// the associated tab selector element. {@link Ext.QuickTips}.init()
		/// must be called in order for the tips to render.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this BoxComponent is a child item of a TabPanel.&lt;/p&gt;
		/// A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over
		/// the associated tab selector element. {@link Ext.QuickTips}.init()
		/// must be called in order for the tips to render.
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("tabTip")]
		public string TabTip;
		
		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered
		/// by a Container which has been configured to use the {@link Ext.layout.BorderLayout BorderLayout}
		/// layout manager (e.g. specifying layout:&apos;border&apos;).
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this BoxComponent is rendered
		/// by a Container which has been configured to use the &lt;b&gt;{@link Ext.layout.BorderLayout BorderLayout}&lt;/b&gt;
		/// layout manager (e.g. specifying &lt;tt&gt;layout:&apos;border&apos;&lt;/tt&gt;).&lt;/p&gt;&lt;br&gt;
		/// &lt;p&gt;See {@link Ext.layout.BorderLayout} also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("region")]
		public string Region;
		
		/// <summary>
		/// Note: this config is only used when this BoxComponent is rendered
		/// by a Container which has been configured to use the {@link Ext.layout.BorderLayout BorderLayout}
		/// or one of the two {@link Ext.layout.BoxLayout BoxLayout} subclasses.  An object containing margins to apply to this BoxComponent in the
		/// format:  
		/// {
		/// top: (top margin),
		/// right: (right margin),
		/// bottom: (bottom margin),
		/// left: (left margin)
		/// }  May also be a string containing space-separated, numeric margin values. The order of the
		/// sides associated with each value matches the way CSS processes margin values:     If there is only one value, it applies to all sides.  If there are two values, the top and bottom borders are set to the first value and the
		/// right and left are set to the second.  If there are three values, the top is set to the first value, the left and right are set
		/// to the second, and the bottom is set to the third.  If there are four values, they apply to the top, right, bottom, and left,...
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this BoxComponent is rendered
		/// by a Container which has been configured to use the &lt;b&gt;{@link Ext.layout.BorderLayout BorderLayout}&lt;/b&gt;
		/// or one of the two &lt;b&gt;{@link Ext.layout.BoxLayout BoxLayout} subclasses.&lt;/b&gt;&lt;/p&gt;
		/// &lt;p&gt;An object containing margins to apply to this BoxComponent in the
		/// format:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		/// {
		/// top: (top margin),
		/// right: (right margin),
		/// bottom: (bottom margin),
		/// left: (left margin)
		/// }&lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;May also be a string containing space-separated, numeric margin values. The order of the
		/// sides associated with each value matches the way CSS processes margin values:&lt;/p&gt;
		/// &lt;p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
		/// &lt;li&gt;If there is only one value, it applies to all sides.&lt;/li&gt;
		/// &lt;li&gt;If there are two values, the top and bottom borders are set to the first value and the
		/// right and left are set to the second.&lt;/li&gt;
		/// &lt;li&gt;If there are three values, the top is set to the first value, the left and right are set
		/// to the second, and the bottom is set to the third.&lt;/li&gt;
		/// &lt;li&gt;If there are four values, they apply to the top, right, bottom, and left, respectively.&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
		/// &lt;p&gt;Defaults to:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		/// {top:0, right:0, bottom:0, left:0}
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("margins")]
		public object Margins;
		
		/// <summary>The local x (left) coordinate for this component if contained within a positioning container.</summary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("x")]
		public System.Number X;
		
		/// <summary>The local y (top) coordinate for this component if contained within a positioning container.</summary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("y")]
		public System.Number Y;
		
		/// <summary>The page level x coordinate for this component if contained within a positioning container.</summary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("pageX")]
		public System.Number PageX;
		
		/// <summary>The page level y coordinate for this component if contained within a positioning container.</summary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("pageY")]
		public System.Number PageY;
		
		/// <summary>
		/// The height of this component in pixels (defaults to auto).
		/// Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
		/// </summary>
		/// <htmlSummary>
		/// The height of this component in pixels (defaults to auto).
		/// &lt;b&gt;Note&lt;/b&gt; to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("height")]
		public System.Number Height;
		
		/// <summary>
		/// The width of this component in pixels (defaults to auto).
		/// Note to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
		/// </summary>
		/// <htmlSummary>
		/// The width of this component in pixels (defaults to auto).
		/// &lt;b&gt;Note&lt;/b&gt; to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("width")]
		public System.Number Width;
		
		/// <summary>The minimum value in pixels which this BoxComponent will set its height to.  Warning: This will override any size management applied by layout managers.</summary>
		/// <htmlSummary>
		/// &lt;p&gt;The minimum value in pixels which this BoxComponent will set its height to.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("boxMinHeight")]
		public System.Number BoxMinHeight;
		
		/// <summary>The minimum value in pixels which this BoxComponent will set its width to.  Warning: This will override any size management applied by layout managers.</summary>
		/// <htmlSummary>
		/// &lt;p&gt;The minimum value in pixels which this BoxComponent will set its width to.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("boxMinWidth")]
		public System.Number BoxMinWidth;
		
		/// <summary>The maximum value in pixels which this BoxComponent will set its height to.  Warning: This will override any size management applied by layout managers.</summary>
		/// <htmlSummary>
		/// &lt;p&gt;The maximum value in pixels which this BoxComponent will set its height to.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("boxMaxHeight")]
		public System.Number BoxMaxHeight;
		
		/// <summary>The maximum value in pixels which this BoxComponent will set its width to.  Warning: This will override any size management applied by layout managers.</summary>
		/// <htmlSummary>
		/// &lt;p&gt;The maximum value in pixels which this BoxComponent will set its width to.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\BoxComponent.js</definedin>
		[ScriptName("boxMaxWidth")]
		public System.Number BoxMaxWidth;
		
		/// <summary>The label text to display next to this Component (defaults to &apos;&apos;).</summary>
		/// <htmlSummary>
		/// &lt;p&gt;The label text to display next to this Component (defaults to &apos;&apos;).&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this Component is rendered by a Container which
		/// has been configured to use the &lt;b&gt;{@link Ext.layout.FormLayout FormLayout}&lt;/b&gt; layout manager (e.g.
		/// {@link Ext.form.FormPanel} or specifying &lt;tt&gt;layout:&apos;form&apos;&lt;/tt&gt;).&lt;/p&gt;&lt;br&gt;
		/// &lt;p&gt;Also see &lt;tt&gt;{@link #hideLabel}&lt;/tt&gt; and
		/// {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.&lt;/p&gt;
		/// Example use:&lt;pre&gt;&lt;code&gt;
		/// new Ext.FormPanel({
		/// height: 100,
		/// renderTo: Ext.getBody(),
		/// items: [{
		/// xtype: &apos;textfield&apos;,
		/// fieldLabel: &apos;Name&apos;
		/// }]
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("fieldLabel")]
		public string FieldLabel;
		
		/// <summary>
		/// A CSS style specification string to apply directly to this field&apos;s
		/// label. Defaults to the container&apos;s labelStyle value if set (e.g.,
		/// {@link Ext.layout.FormLayout#labelStyle} , or &apos;&apos;).
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A CSS style specification string to apply directly to this field&apos;s
		/// label. Defaults to the container&apos;s labelStyle value if set (e.g.,
		/// &lt;tt&gt;{@link Ext.layout.FormLayout#labelStyle}&lt;/tt&gt; , or &apos;&apos;).&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: see the note for &lt;code&gt;{@link #clearCls}&lt;/code&gt;.&lt;/p&gt;&lt;br&gt;
		/// &lt;p&gt;Also see &lt;code&gt;{@link #hideLabel}&lt;/code&gt; and
		/// &lt;code&gt;{@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.&lt;/code&gt;&lt;/p&gt;
		/// Example use:&lt;pre&gt;&lt;code&gt;
		/// new Ext.FormPanel({
		/// height: 100,
		/// renderTo: Ext.getBody(),
		/// items: [{
		/// xtype: &apos;textfield&apos;,
		/// fieldLabel: &apos;Name&apos;,
		/// labelStyle: &apos;font-weight:bold;&apos;
		/// }]
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("labelStyle")]
		public string LabelStyle;
		
		/// <summary>
		/// The separator to display after the text of each
		/// {@link #fieldLabel}. This property may be configured at various levels.
		/// The order of precedence is:
		///   field / component level  container level  {@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon &apos;:&apos;)   
		/// To display no separator for this field&apos;s label specify empty string &apos;&apos;.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;The separator to display after the text of each
		/// &lt;tt&gt;{@link #fieldLabel}&lt;/tt&gt;. This property may be configured at various levels.
		/// The order of precedence is:
		/// &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
		/// &lt;li&gt;field / component level&lt;/li&gt;
		/// &lt;li&gt;container level&lt;/li&gt;
		/// &lt;li&gt;{@link Ext.layout.FormLayout#labelSeparator layout level} (defaults to colon &lt;tt&gt;&apos;:&apos;&lt;/tt&gt;)&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;
		/// To display no separator for this field&apos;s label specify empty string &apos;&apos;.&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: see the note for &lt;tt&gt;{@link #clearCls}&lt;/tt&gt;.&lt;/p&gt;&lt;br&gt;
		/// &lt;p&gt;Also see &lt;tt&gt;{@link #hideLabel}&lt;/tt&gt; and
		/// {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}.&lt;/p&gt;
		/// Example use:&lt;pre&gt;&lt;code&gt;
		/// new Ext.FormPanel({
		/// height: 100,
		/// renderTo: Ext.getBody(),
		/// layoutConfig: {
		/// labelSeparator: &apos;~&apos; // layout config has lowest priority (defaults to &apos;:&apos;)
		/// },
		/// {@link Ext.layout.FormLayout#labelSeparator labelSeparator}: &apos;&gt;&gt;&apos;, // config at container level
		/// items: [{
		/// xtype: &apos;textfield&apos;,
		/// fieldLabel: &apos;Field 1&apos;,
		/// labelSeparator: &apos;...&apos; // field/component level config supersedes others
		/// },{
		/// xtype: &apos;textfield&apos;,
		/// fieldLabel: &apos;Field 2&apos; // labelSeparator will be &apos;=&apos;
		/// }]
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("labelSeparator")]
		public string LabelSeparator;
		
		/// <summary>
		/// true to completely hide the label element
		/// ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to false.
		/// By default, even if you do not specify a {@link #fieldLabel} the space will still be
		/// reserved so that the field will line up with other fields that do have labels.
		/// Setting this to true will cause the field to not reserve that space.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;tt&gt;true&lt;/tt&gt; to completely hide the label element
		/// ({@link #fieldLabel label} and {@link #labelSeparator separator}). Defaults to &lt;tt&gt;false&lt;/tt&gt;.
		/// By default, even if you do not specify a &lt;tt&gt;{@link #fieldLabel}&lt;/tt&gt; the space will still be
		/// reserved so that the field will line up with other fields that do have labels.
		/// Setting this to &lt;tt&gt;true&lt;/tt&gt; will cause the field to not reserve that space.&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: see the note for &lt;tt&gt;{@link #clearCls}&lt;/tt&gt;.&lt;/p&gt;&lt;br&gt;
		/// Example use:&lt;pre&gt;&lt;code&gt;
		/// new Ext.FormPanel({
		/// height: 100,
		/// renderTo: Ext.getBody(),
		/// items: [{
		/// xtype: &apos;textfield&apos;
		/// hideLabel: true
		/// }]
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("hideLabel")]
		public bool HideLabel;
		
		/// <summary>
		/// The CSS class used to to apply to the special clearing div rendered
		/// directly after each form field wrapper to provide field clearing (defaults to
		/// &apos;x-form-clear-left&apos;).
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;The CSS class used to to apply to the special clearing div rendered
		/// directly after each form field wrapper to provide field clearing (defaults to
		/// &lt;tt&gt;&apos;x-form-clear-left&apos;&lt;/tt&gt;).&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this Component is rendered by a Container
		/// which has been configured to use the &lt;b&gt;{@link Ext.layout.FormLayout FormLayout}&lt;/b&gt; layout
		/// manager (e.g. {@link Ext.form.FormPanel} or specifying &lt;tt&gt;layout:&apos;form&apos;&lt;/tt&gt;) and either a
		/// &lt;tt&gt;{@link #fieldLabel}&lt;/tt&gt; is specified or &lt;tt&gt;isFormField=true&lt;/tt&gt; is specified.&lt;/p&gt;&lt;br&gt;
		/// &lt;p&gt;See {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("clearCls")]
		public string ClearCls;
		
		/// <summary>
		/// Note: this config is only used when this Component is rendered by a Container which
		/// has been configured to use the {@link Ext.layout.FormLayout FormLayout} layout manager (e.g.
		/// {@link Ext.form.FormPanel} or specifying layout:&apos;form&apos;).
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this config is only used when this Component is rendered by a Container which
		/// has been configured to use the &lt;b&gt;{@link Ext.layout.FormLayout FormLayout}&lt;/b&gt; layout manager (e.g.
		/// {@link Ext.form.FormPanel} or specifying &lt;tt&gt;layout:&apos;form&apos;&lt;/tt&gt;).&lt;/p&gt;&lt;br&gt;
		/// &lt;p&gt;An additional CSS class to apply to the div wrapping the form item
		/// element of this field. If supplied, &lt;tt&gt;itemCls&lt;/tt&gt; at the &lt;b&gt;field&lt;/b&gt; level will override
		/// the default &lt;tt&gt;itemCls&lt;/tt&gt; supplied at the &lt;b&gt;container&lt;/b&gt; level. The value specified for
		/// &lt;tt&gt;itemCls&lt;/tt&gt; will be added to the default class (&lt;tt&gt;&apos;x-form-item&apos;&lt;/tt&gt;).&lt;/p&gt;
		/// &lt;p&gt;Since it is applied to the item wrapper (see
		/// {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl}), it allows
		/// you to write standard CSS rules that can apply to the field, the label (if specified), or
		/// any other element within the markup for the field.&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: see the note for &lt;tt&gt;{@link #fieldLabel}&lt;/tt&gt;.&lt;/p&gt;&lt;br&gt;
		/// Example use:&lt;pre&gt;&lt;code&gt;
		/// // Apply a style to the field&amp;#39;s label:
		/// &amp;lt;style&gt;
		/// .required .x-form-item-label {font-weight:bold;color:red;}
		/// &amp;lt;/style&gt;
		///
		/// new Ext.FormPanel({
		/// height: 100,
		/// renderTo: Ext.getBody(),
		/// items: [{
		/// xtype: &apos;textfield&apos;,
		/// fieldLabel: &apos;Name&apos;,
		/// itemCls: &apos;required&apos; //this label will be styled
		/// },{
		/// xtype: &apos;textfield&apos;,
		/// fieldLabel: &apos;Favorite Color&apos;
		/// }]
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("itemCls")]
		public string ItemCls;
		
		/// <summary>
		/// The unique id of this component (defaults to an {@link #getId auto-assigned id}).
		/// You should assign an id if you need to be able to access the component later and you do
		/// not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).  Note that this id will also be used as the element id for the containing HTML element
		/// that is rendered to the page for this component. This allows you to write id-based CSS
		/// rules to style the specific instance of this component uniquely, and also to select
		/// sub-elements using this component&apos;s id as the parent.  Note: to avoid complications imposed by a unique id also see
		/// {@link #itemId} and {@link #ref}.  Note: to access the container of an item see {@link #ownerCt}.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;The &lt;b&gt;unique&lt;/b&gt; id of this component (defaults to an {@link #getId auto-assigned id}).
		/// You should assign an id if you need to be able to access the component later and you do
		/// not have an object reference available (e.g., using {@link Ext}.{@link Ext#getCmp getCmp}).&lt;/p&gt;
		/// &lt;p&gt;Note that this id will also be used as the element id for the containing HTML element
		/// that is rendered to the page for this component. This allows you to write id-based CSS
		/// rules to style the specific instance of this component uniquely, and also to select
		/// sub-elements using this component&apos;s id as the parent.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to avoid complications imposed by a unique &lt;tt&gt;id&lt;/tt&gt; also see
		/// &lt;code&gt;{@link #itemId}&lt;/code&gt; and &lt;code&gt;{@link #ref}&lt;/code&gt;.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access the container of an item see &lt;code&gt;{@link #ownerCt}&lt;/code&gt;.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("id")]
		public string Id;
		
		/// <summary>
		/// An itemId can be used as an alternative way to get a reference to a component
		/// when no object reference is available. Instead of using an {@link #id} with
		/// {@link Ext}.{@link Ext#getCmp getCmp}, use itemId with
		/// {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
		/// itemId&apos;s or {@link #id}&apos;s. Since itemId&apos;s are an index to the
		/// container&apos;s internal MixedCollection, the itemId is scoped locally to the container --
		/// avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a unique{@link #id}.  
		/// var c = new Ext.Panel({ //
		/// {@link Ext.BoxComponent#height height}: 300,
		/// {@link #renderTo}: document.body,
		/// {@link Ext.Container#layout layout}: &apos;auto&apos;,
		/// {@link Ext.Container#items items}: [
		/// {
		/// itemId: &apos;p1&apos;,
		/// {@link Ext.Panel#title title}: &apos;Panel 1&apos;,
		/// {@link Ext.BoxComponent#height height}: 150
		/// },
		/// {
		/// itemId: &apos;p2&apos;,
		/// {@link Ext.Panel#title title}: &apos;Panel 2&apos;,
		/// {@link Ext.BoxComponent#height height}: 150
		/// }
		/// ]
		/// })
		/// p1 = c.{@link...
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;An &lt;tt&gt;itemId&lt;/tt&gt; can be used as an alternative way to get a reference to a component
		/// when no object reference is available. Instead of using an &lt;code&gt;{@link #id}&lt;/code&gt; with
		/// {@link Ext}.{@link Ext#getCmp getCmp}, use &lt;code&gt;itemId&lt;/code&gt; with
		/// {@link Ext.Container}.{@link Ext.Container#getComponent getComponent} which will retrieve
		/// &lt;code&gt;itemId&lt;/code&gt;&apos;s or &lt;tt&gt;{@link #id}&lt;/tt&gt;&apos;s. Since &lt;code&gt;itemId&lt;/code&gt;&apos;s are an index to the
		/// container&apos;s internal MixedCollection, the &lt;code&gt;itemId&lt;/code&gt; is scoped locally to the container --
		/// avoiding potential conflicts with {@link Ext.ComponentMgr} which requires a &lt;b&gt;unique&lt;/b&gt;
		/// &lt;code&gt;{@link #id}&lt;/code&gt;.&lt;/p&gt;
		/// &lt;pre&gt;&lt;code&gt;
		/// var c = new Ext.Panel({ //
		/// {@link Ext.BoxComponent#height height}: 300,
		/// {@link #renderTo}: document.body,
		/// {@link Ext.Container#layout layout}: &apos;auto&apos;,
		/// {@link Ext.Container#items items}: [
		/// {
		/// itemId: &apos;p1&apos;,
		/// {@link Ext.Panel#title title}: &apos;Panel 1&apos;,
		/// {@link Ext.BoxComponent#height height}: 150
		/// },
		/// {
		/// itemId: &apos;p2&apos;,
		/// {@link Ext.Panel#title title}: &apos;Panel 2&apos;,
		/// {@link Ext.BoxComponent#height height}: 150
		/// }
		/// ]
		/// })
		/// p1 = c.{@link Ext.Container#getComponent getComponent}(&apos;p1&apos;); // not the same as {@link Ext#getCmp Ext.getCmp()}
		/// p2 = p1.{@link #ownerCt}.{@link Ext.Container#getComponent getComponent}(&apos;p2&apos;); // reference via a sibling
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;Also see &lt;tt&gt;{@link #id}&lt;/tt&gt; and &lt;code&gt;{@link #ref}&lt;/code&gt;.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access the container of an item see &lt;tt&gt;{@link #ownerCt}&lt;/tt&gt;.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("itemId")]
		public string ItemId;
		
		/// <summary>
		/// The registered xtype to create. This config option is not used when passing
		/// a config object into a constructor. This config option is used only when
		/// lazy instantiation is being used, and a child item of a Container is being
		/// specified not as a fully instantiated Component, but as a Component config
		/// object. The xtype will be looked up at render time up to determine what
		/// type of child Component to create.
		/// </summary>
		/// <htmlSummary>
		/// The registered &lt;tt&gt;xtype&lt;/tt&gt; to create. This config option is not used when passing
		/// a config object into a constructor. This config option is used only when
		/// lazy instantiation is being used, and a child item of a Container is being
		/// specified not as a fully instantiated Component, but as a &lt;i&gt;Component config
		/// object&lt;/i&gt;. The &lt;tt&gt;xtype&lt;/tt&gt; will be looked up at render time up to determine what
		/// type of child Component to create.&lt;br&gt;&lt;br&gt;
		/// The predefined xtypes are listed {@link Ext.Component here}.
		/// &lt;br&gt;&lt;br&gt;
		/// If you subclass Components to create your own Components, you may register
		/// them using {@link Ext.ComponentMgr#registerType} in order to be able to
		/// take advantage of lazy instantiation and rendering.
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("xtype")]
		public string Xtype;
		
		/// <summary>
		/// The registered ptype to create. This config option is not used when passing
		/// a config object into a constructor. This config option is used only when
		/// lazy instantiation is being used, and a Plugin is being
		/// specified not as a fully instantiated Component, but as a Component config
		/// object. The ptype will be looked up at render time up to determine what
		/// type of Plugin to create.
		/// </summary>
		/// <htmlSummary>
		/// The registered &lt;tt&gt;ptype&lt;/tt&gt; to create. This config option is not used when passing
		/// a config object into a constructor. This config option is used only when
		/// lazy instantiation is being used, and a Plugin is being
		/// specified not as a fully instantiated Component, but as a &lt;i&gt;Component config
		/// object&lt;/i&gt;. The &lt;tt&gt;ptype&lt;/tt&gt; will be looked up at render time up to determine what
		/// type of Plugin to create.&lt;br&gt;&lt;br&gt;
		/// If you create your own Plugins, you may register them using
		/// {@link Ext.ComponentMgr#registerPlugin} in order to be able to
		/// take advantage of lazy instantiation and rendering.
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("ptype")]
		public string Ptype;
		
		/// <summary>
		/// An optional extra CSS class that will be added to this component&apos;s Element (defaults to &apos;&apos;). This can be
		/// useful for adding customized styles to the component or any of its children using standard CSS rules.
		/// </summary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("cls")]
		public string Cls;
		
		/// <summary>
		/// An optional extra CSS class that will be added to this component&apos;s Element when the mouse moves
		/// over the Element, and removed when the mouse moves out. (defaults to &apos;&apos;). This can be
		/// useful for adding customized &apos;active&apos; or &apos;hover&apos; styles to the component or any of its children using standard CSS rules.
		/// </summary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("overCls")]
		public string OverCls;
		
		/// <summary>
		/// A custom style specification to be applied to this component&apos;s Element. Should be a valid argument to
		/// {@link Ext.Element#applyStyles}.
		/// 
		/// new Ext.Panel({
		/// title: &apos;Some Title&apos;,
		/// renderTo: Ext.getBody(),
		/// width: 400, height: 300,
		/// layout: &apos;form&apos;,
		/// items: [{
		/// xtype: &apos;textarea&apos;,
		/// style: {
		/// width: &apos;95%&apos;,
		/// marginBottom: &apos;10px&apos;
		/// }
		/// },
		/// new Ext.Button({
		/// text: &apos;Send&apos;,
		/// minWidth: &apos;100&apos;,
		/// style: {
		/// marginBottom: &apos;10px&apos;
		/// }
		/// })
		/// ]
		/// });
		/// </summary>
		/// <htmlSummary>
		/// A custom style specification to be applied to this component&apos;s Element. Should be a valid argument to
		/// {@link Ext.Element#applyStyles}.
		/// &lt;pre&gt;&lt;code&gt;
		/// new Ext.Panel({
		/// title: &apos;Some Title&apos;,
		/// renderTo: Ext.getBody(),
		/// width: 400, height: 300,
		/// layout: &apos;form&apos;,
		/// items: [{
		/// xtype: &apos;textarea&apos;,
		/// style: {
		/// width: &apos;95%&apos;,
		/// marginBottom: &apos;10px&apos;
		/// }
		/// },
		/// new Ext.Button({
		/// text: &apos;Send&apos;,
		/// minWidth: &apos;100&apos;,
		/// style: {
		/// marginBottom: &apos;10px&apos;
		/// }
		/// })
		/// ]
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("style")]
		public string Style;
		
		/// <summary>
		/// An optional extra CSS class that will be added to this component&apos;s container. This can be useful for
		/// adding customized styles to the container or any of its children using standard CSS rules. See
		/// {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.  Note: ctCls defaults to &apos;&apos; except for the following class
		/// which assigns a value by default:
		///   {@link Ext.layout.Box Box Layout} : &apos;x-box-layout-ct&apos;   
		/// To configure the above Class with an extra CSS class append to the default. For example,
		/// for BoxLayout (Hbox and Vbox): 
		/// ctCls: &apos;x-box-layout-ct custom-class&apos;
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;An optional extra CSS class that will be added to this component&apos;s container. This can be useful for
		/// adding customized styles to the container or any of its children using standard CSS rules. See
		/// {@link Ext.layout.ContainerLayout}.{@link Ext.layout.ContainerLayout#extraCls extraCls} also.&lt;/p&gt;
		/// &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: &lt;tt&gt;ctCls&lt;/tt&gt; defaults to &lt;tt&gt;&apos;&apos;&lt;/tt&gt; except for the following class
		/// which assigns a value by default:
		/// &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
		/// &lt;li&gt;{@link Ext.layout.Box Box Layout} : &lt;tt&gt;&apos;x-box-layout-ct&apos;&lt;/tt&gt;&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;
		/// To configure the above Class with an extra CSS class append to the default. For example,
		/// for BoxLayout (Hbox and Vbox):&lt;pre&gt;&lt;code&gt;
		/// ctCls: &apos;x-box-layout-ct custom-class&apos;
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("ctCls")]
		public string CtCls;
		
		/// <summary>
		/// Render this component hidden (default is false). If true, the
		/// {@link #hide} method will be called internally.
		/// </summary>
		/// <htmlSummary>
		/// Render this component hidden (default is false). If &lt;tt&gt;true&lt;/tt&gt;, the
		/// {@link #hide} method will be called internally.
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("hidden")]
		public bool Hidden;
		
		/// <summary>
		/// An object or array of objects that will provide custom functionality for this component. The only
		/// requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
		/// When a component is created, if any plugins are available, the component will call the init method on each
		/// plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the
		/// component as needed to provide its functionality.
		/// </summary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("plugins")]
		public ext.auto.System_Object_Or_System_Array Plugins;
		
		/// <summary>
		/// Specify the id of the element, a DOM element or an existing Element that this component
		/// will be rendered into.    Notes :   Do not use this option if the Component is to be a child item of
		/// a {@link Ext.Container Container}. It is the responsibility of the
		/// {@link Ext.Container Container}&apos;s {@link Ext.Container#layout layout manager}
		/// to render and manage its child items.  When using this config, a call to render() is not required.      See {@link #render} also.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;Specify the id of the element, a DOM element or an existing Element that this component
		/// will be rendered into.&lt;/p&gt;&lt;div&gt;&lt;ul&gt;
		/// &lt;li&gt;&lt;b&gt;Notes&lt;/b&gt; : &lt;ul&gt;
		/// &lt;div class=&quot;sub-desc&quot;&gt;Do &lt;u&gt;not&lt;/u&gt; use this option if the Component is to be a child item of
		/// a {@link Ext.Container Container}. It is the responsibility of the
		/// {@link Ext.Container Container}&apos;s {@link Ext.Container#layout layout manager}
		/// to render and manage its child items.&lt;/div&gt;
		/// &lt;div class=&quot;sub-desc&quot;&gt;When using this config, a call to render() is not required.&lt;/div&gt;
		/// &lt;/ul&gt;&lt;/li&gt;
		/// &lt;/ul&gt;&lt;/div&gt;
		/// &lt;p&gt;See &lt;tt&gt;{@link #render}&lt;/tt&gt; also.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("renderTo")]
		public object RenderTo;
		
		/// <summary>
		/// A flag which causes the Component to attempt to restore the state of
		/// internal properties from a saved state on startup. The component must have
		/// either a {@link #stateId} or {@link #id} assigned
		/// for state to be managed. Auto-generated ids are not guaranteed to be stable
		/// across page loads and cannot be relied upon to save and restore the same
		/// state for a component.  For state saving to work, the state manager&apos;s provider must have been
		/// set to an implementation of {@link Ext.state.Provider} which overrides the
		/// {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
		/// methods to save and recall name/value pairs. A built-in implementation,
		/// {@link Ext.state.CookieProvider} is available.  To set the state provider for the current page:  
		/// Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
		/// expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
		/// }));
		///  A stateful Component attempts to save state when one of the events
		/// listed in the...
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A flag which causes the Component to attempt to restore the state of
		/// internal properties from a saved state on startup. The component must have
		/// either a &lt;code&gt;{@link #stateId}&lt;/code&gt; or &lt;code&gt;{@link #id}&lt;/code&gt; assigned
		/// for state to be managed. Auto-generated ids are not guaranteed to be stable
		/// across page loads and cannot be relied upon to save and restore the same
		/// state for a component.&lt;p&gt;
		/// &lt;p&gt;For state saving to work, the state manager&apos;s provider must have been
		/// set to an implementation of {@link Ext.state.Provider} which overrides the
		/// {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
		/// methods to save and recall name/value pairs. A built-in implementation,
		/// {@link Ext.state.CookieProvider} is available.&lt;/p&gt;
		/// &lt;p&gt;To set the state provider for the current page:&lt;/p&gt;
		/// &lt;pre&gt;&lt;code&gt;
		/// Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
		/// expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
		/// }));
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;A stateful Component attempts to save state when one of the events
		/// listed in the &lt;code&gt;{@link #stateEvents}&lt;/code&gt; configuration fires.&lt;/p&gt;
		/// &lt;p&gt;To save state, a stateful Component first serializes its state by
		/// calling &lt;b&gt;&lt;code&gt;getState&lt;/code&gt;&lt;/b&gt;. By default, this function does
		/// nothing. The developer must provide an implementation which returns an
		/// object hash which represents the Component&apos;s restorable state.&lt;/p&gt;
		/// &lt;p&gt;The value yielded by getState is passed to {@link Ext.state.Manager#set}
		/// which uses the configured {@link Ext.state.Provider} to save the object
		/// keyed by the Component&apos;s &lt;code&gt;{@link stateId}&lt;/code&gt;, or, if that is not
		/// specified, its &lt;code&gt;{@link #id}&lt;/code&gt;.&lt;/p&gt;
		/// &lt;p&gt;During construction, a stateful Component attempts to &lt;i&gt;restore&lt;/i&gt;
		/// its state by calling {@link Ext.state.Manager#get} passing the
		/// &lt;code&gt;{@link #stateId}&lt;/code&gt;, or, if that is not specified, the
		/// &lt;code&gt;{@link #id}&lt;/code&gt;.&lt;/p&gt;
		/// &lt;p&gt;The resulting object is passed to &lt;b&gt;&lt;code&gt;applyState&lt;/code&gt;&lt;/b&gt;.
		/// The default implementation of &lt;code&gt;applyState&lt;/code&gt; simply copies
		/// properties into the object, but a developer may override this to support
		/// more behaviour.&lt;/p&gt;
		/// &lt;p&gt;You can perform extra processing on state save and restore by attaching
		/// handlers to the {@link #beforestaterestore}, {@link #staterestore},
		/// {@link #beforestatesave} and {@link #statesave} events.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("stateful")]
		public bool Stateful;
		
		/// <summary>
		/// The unique id for this component to use for state management purposes
		/// (defaults to the component id if one was set, otherwise null if the
		/// component is using a generated id).
		/// See {@link #stateful} for an explanation of saving and
		/// restoring Component state.
		/// </summary>
		/// <htmlSummary>
		/// The unique id for this component to use for state management purposes
		/// (defaults to the component id if one was set, otherwise null if the
		/// component is using a generated id).
		/// &lt;p&gt;See &lt;code&gt;{@link #stateful}&lt;/code&gt; for an explanation of saving and
		/// restoring Component state.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("stateId")]
		public string StateId;
		
		/// <summary>
		/// True if the component should check for hidden classes (e.g. &apos;x-hidden&apos; or &apos;x-hide-display&apos;) and remove
		/// them on render (defaults to false).
		/// </summary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("autoShow")]
		public bool AutoShow;
		
		/// <summary>
		/// How this component should be hidden. Supported values are &apos;visibility&apos;
		/// (css visibility), &apos;offsets&apos; (negative offset position) and &apos;display&apos;
		/// (css display).
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;How this component should be hidden. Supported values are &lt;tt&gt;&apos;visibility&apos;&lt;/tt&gt;
		/// (css visibility), &lt;tt&gt;&apos;offsets&apos;&lt;/tt&gt; (negative offset position) and &lt;tt&gt;&apos;display&apos;&lt;/tt&gt;
		/// (css display).&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: the default of &lt;tt&gt;&apos;display&apos;&lt;/tt&gt; is generally preferred
		/// since items are automatically laid out when they are first shown (no sizing
		/// is done while hidden).&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("hideMode")]
		public string HideMode;
		
		/// <summary>
		/// True to hide and show the component&apos;s container when hide/show is called on the component, false to hide
		/// and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide
		/// button on a window by setting hide:true on the button when adding it to its parent container.
		/// </summary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("hideParent")]
		public bool HideParent;
		
		/// <summary>
		/// An  ,  
		/// or an array of strings to form an Ext.XTemplate.
		/// Used in conjunction with the {@link #data} and
		/// {@link #tplWriteMode} configurations.
		/// </summary>
		/// <htmlSummary>
		/// An &lt;bold&gt;{@link Ext.Template}&lt;/bold&gt;, &lt;bold&gt;{@link Ext.XTemplate}&lt;/bold&gt;
		/// or an array of strings to form an Ext.XTemplate.
		/// Used in conjunction with the &lt;code&gt;{@link #data}&lt;/code&gt; and
		/// &lt;code&gt;{@link #tplWriteMode}&lt;/code&gt; configurations.
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("tpl")]
		public object Tpl;
		
		/// <summary>
		/// The Ext.(X)Template method to use when
		/// updating the content area of the Component. Defaults to &apos;overwrite&apos;
		/// (see {@link Ext.XTemplate#overwrite}).
		/// </summary>
		/// <htmlSummary>
		/// The Ext.(X)Template method to use when
		/// updating the content area of the Component. Defaults to &lt;tt&gt;&apos;overwrite&apos;&lt;/tt&gt;
		/// (see &lt;code&gt;{@link Ext.XTemplate#overwrite}&lt;/code&gt;).
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("tplWriteMode")]
		public string TplWriteMode;
		
		/// <summary>
		/// The initial set of data to apply to the {@link #tpl} to
		/// update the content area of the Component.
		/// </summary>
		/// <htmlSummary>
		/// The initial set of data to apply to the &lt;code&gt;{@link #tpl}&lt;/code&gt; to
		/// update the content area of the Component.
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("data")]
		public object Data;
		
		/// <summary>
		/// A path specification, relative to the Component&apos;s {@link #ownerCt}
		/// specifying into which ancestor Container to place a named reference to this Component.  The ancestor axis can be traversed by using &apos;/&apos; characters in the path.
		/// For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:  
		/// var myGrid = new Ext.grid.EditorGridPanel({
		/// title: &apos;My EditorGridPanel&apos;,
		/// store: myStore,
		/// colModel: myColModel,
		/// tbar: [{
		/// text: &apos;Save&apos;,
		/// handler: saveChanges,
		/// disabled: true,
		/// ref: &apos;../saveButton&apos;
		/// }],
		/// listeners: {
		/// afteredit: function() {
		/// // The button reference is in the GridPanel
		/// myGrid.saveButton.enable();
		/// }
		/// }
		/// });
		///  In the code above, if the ref had been &apos;saveButton&apos;
		/// the reference would have been placed into the Toolbar. Each &apos;/&apos; in the ref
		/// moves up one level from the Component&apos;s {@link #ownerCt}.  Also see the {@link #added} and {@link #removed} events.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A path specification, relative to the Component&apos;s &lt;code&gt;{@link #ownerCt}&lt;/code&gt;
		/// specifying into which ancestor Container to place a named reference to this Component.&lt;/p&gt;
		/// &lt;p&gt;The ancestor axis can be traversed by using &apos;/&apos; characters in the path.
		/// For example, to put a reference to a Toolbar Button into &lt;i&gt;the Panel which owns the Toolbar&lt;/i&gt;:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
		/// var myGrid = new Ext.grid.EditorGridPanel({
		/// title: &apos;My EditorGridPanel&apos;,
		/// store: myStore,
		/// colModel: myColModel,
		/// tbar: [{
		/// text: &apos;Save&apos;,
		/// handler: saveChanges,
		/// disabled: true,
		/// ref: &apos;../saveButton&apos;
		/// }],
		/// listeners: {
		/// afteredit: function() {
		/// // The button reference is in the GridPanel
		/// myGrid.saveButton.enable();
		/// }
		/// }
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;
		/// &lt;p&gt;In the code above, if the &lt;code&gt;ref&lt;/code&gt; had been &lt;code&gt;&apos;saveButton&apos;&lt;/code&gt;
		/// the reference would have been placed into the Toolbar. Each &apos;/&apos; in the &lt;code&gt;ref&lt;/code&gt;
		/// moves up one level from the Component&apos;s &lt;code&gt;{@link #ownerCt}&lt;/code&gt;.&lt;/p&gt;
		/// &lt;p&gt;Also see the &lt;code&gt;{@link #added}&lt;/code&gt; and &lt;code&gt;{@link #removed}&lt;/code&gt; events.&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\widgets\Component.js</definedin>
		[ScriptName("ref")]
		public string Ref;
		
		/// <summary>
		/// A config object containing one or more event handlers to be added to this
		/// object during initialization. This should be a valid listeners config object as specified in the
		/// {@link #addListener} example for attaching multiple handlers at once.
		/// </summary>
		/// <htmlSummary>
		/// &lt;p&gt;A config object containing one or more event handlers to be added to this
		/// object during initialization. This should be a valid listeners config object as specified in the
		/// {@link #addListener} example for attaching multiple handlers at once.&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;&lt;b&gt;&lt;u&gt;DOM events from ExtJs {@link Ext.Component Components}&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
		/// &lt;br&gt;&lt;p&gt;While &lt;i&gt;some&lt;/i&gt; ExtJs Component classes export selected DOM events (e.g. &quot;click&quot;, &quot;mouseover&quot; etc), this
		/// is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}&apos;s
		/// &lt;b&gt;&lt;code&gt;{@link Ext.DataView#click click}&lt;/code&gt;&lt;/b&gt; event passing the node clicked on. To access DOM
		/// events directly from a Component&apos;s HTMLElement, listeners must be added to the &lt;i&gt;{@link Ext.Component#getEl Element}&lt;/i&gt; after the Component
		/// has been rendered. A plugin can simplify this step:&lt;pre&gt;&lt;code&gt;
		/// // Plugin is configured with a listeners config object.
		/// // The Component is appended to the argument list of all handler functions.
		/// Ext.DomObserver = Ext.extend(Object, {
		/// constructor: function(config) {
		/// this.listeners = config.listeners ? config.listeners : config;
		/// },
		///
		/// // Component passes itself into plugin&amp;#39;s init method
		/// init: function(c) {
		/// var p, l = this.listeners;
		/// for (p in l) {
		/// if (Ext.isFunction(l[p])) {
		/// l[p] = this.createHandler(l[p], c);
		/// } else {
		/// l[p].fn = this.createHandler(l[p].fn, c);
		/// }
		/// }
		///
		/// // Add the listeners to the Element immediately following the render call
		/// c.render = c.render.{@link Function#createSequence createSequence}(function() {
		/// var e = c.getEl();
		/// if (e) {
		/// e.on(l);
		/// }
		/// });
		/// },
		///
		/// createHandler: function(fn, c) {
		/// return function(e) {
		/// fn.call(this, e, c);
		/// };
		/// }
		/// });
		///
		/// var combo = new Ext.form.ComboBox({
		///
		/// // Collapse combo when its element is clicked on
		/// plugins: [ new Ext.DomObserver({
		/// click: function(evt, comp) {
		/// comp.collapse();
		/// }
		/// })],
		/// store: myStore,
		/// typeAhead: true,
		/// mode: &apos;local&apos;,
		/// triggerAction: &apos;all&apos;
		/// });
		/// &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
		/// </htmlSummary>
		/// <definedin>src\ext-core\src\util\Observable.js</definedin>
		/// <optional>Optional Field</optional>
		[ScriptName("listeners")]
		public object Listeners;
		#endregion
	}
}
